I need 4 columns in a webpage.
Anyone know how to do it?
Thanks,
Doc
Doc
Registered User
18 posts
BillR
Senior Advisor
3,144 posts
Doc,
I have seen several sites that have information on how to create a web page with four columns. One method that seems very controllable is to use <div> tags, and divide the page into TWO sides, and put two columns in each side. You can then use CSS to set the widths, padding, margins, etc.
The divisions could look something like this:
<div id="lside"> <!-- use #lside to set the style for the left side -->
<div class="lcol"> <!-- use .lcol to set the style for the left column -->
left side left column content goes here
</div>
<div class="rcol"> <!-- use .rcol to set the style for the right column -->
left side right column content goes here
</div>
</div>
<div id="rside"> <!-- use #rside to set the style for the right side -->
<div class="lcol"> <!-- use .lcol to set the style for the left column -->
right side left column content goes here
</div>
<div class="rcol"> <!-- use .rcol to set the style for the right column -->
right side right column content goes here
</div>
</div>
Just use your style statements to adjust the column settings, and set the width of your body content.
If you want a simple page setup up, let me know and I can create something.
You can also google for the information.
http://www.alistapart.com/articles/flexiblelayouts/ is on a good site and may be what you want.
http://www.pagecolumn.com/4_col_generator.htm is a site that will produce the code for your site.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
I have seen several sites that have information on how to create a web page with four columns. One method that seems very controllable is to use <div> tags, and divide the page into TWO sides, and put two columns in each side. You can then use CSS to set the widths, padding, margins, etc.
The divisions could look something like this:
<div id="lside"> <!-- use #lside to set the style for the left side -->
<div class="lcol"> <!-- use .lcol to set the style for the left column -->
left side left column content goes here
</div>
<div class="rcol"> <!-- use .rcol to set the style for the right column -->
left side right column content goes here
</div>
</div>
<div id="rside"> <!-- use #rside to set the style for the right side -->
<div class="lcol"> <!-- use .lcol to set the style for the left column -->
right side left column content goes here
</div>
<div class="rcol"> <!-- use .rcol to set the style for the right column -->
right side right column content goes here
</div>
</div>
Just use your style statements to adjust the column settings, and set the width of your body content.
If you want a simple page setup up, let me know and I can create something.
You can also google for the information.
http://www.alistapart.com/articles/flexiblelayouts/ is on a good site and may be what you want.
http://www.pagecolumn.com/4_col_generator.htm is a site that will produce the code for your site.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Rushell Wood
Registered User
2 posts
I would use the "obejcts" button to create the first column. It's extremely easy, and you can fill with color to match your background, so it doesn't look like you've added shapes, or not, and lengthen/widen to suit your text. Once you have created one the size you want, I would copy & paste it to make the other 3 equal in size. Hope this helps.
kristina_engcau84
Trial User
1 post
Anyone can help me to create 3 columns page?
BillR
Senior Advisor
3,144 posts
kristina_engcau84,
What software are you using to create your web pages?
Did you read the previous messages and try any of those suggestions?
One way to create columns is to use styles such as:
#left {
float:left;
width:200px;
}
#center {
float:left;
width:200px;
}
#right {
float:left;
width:200px;
}
Then in your HTML code use something like this:
<div id="left">
<p> left column text goes here </p>
</div>
<div id="center">
<p> center column text goes here </p>
</div>
<div id="right">
<p> right column text goes here </p>
</div>
There are other ways to do this. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
What software are you using to create your web pages?
Did you read the previous messages and try any of those suggestions?
One way to create columns is to use styles such as:
#left {
float:left;
width:200px;
}
#center {
float:left;
width:200px;
}
#right {
float:left;
width:200px;
}
Then in your HTML code use something like this:
<div id="left">
<p> left column text goes here </p>
</div>
<div id="center">
<p> center column text goes here </p>
</div>
<div id="right">
<p> right column text goes here </p>
</div>
There are other ways to do this. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Spinny
Senior Advisor
1,332 posts
Maybe I'm missing something; this is a VSD question:
Can't you just make a text box shaped like one of the desired columns, then copy/paste it into the other column positions, and fill with text to taste?
Am I overlooking something? "You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa
Visit Spinland Studios: http://www.spinland.biz
Can't you just make a text box shaped like one of the desired columns, then copy/paste it into the other column positions, and fill with text to taste?
Am I overlooking something? "You can't be a real country unless you have a beer and an airline - it helps if you have some kind of a football team, or some nuclear weapons, but at the very least you need a beer." -- Frank Zappa
Visit Spinland Studios: http://www.spinland.biz
BillR
Senior Advisor
3,144 posts
Spinny,
That is why I asked what software is being used. If they are using anything other than CoffeeCup software, any answer directed specifically to a CC program may be wrong.
Your answer is perfect for VSD, and quite likely the answer that is needed.
OK, so that was a long way around to say you didn't miss anything.
Bill R.First Baptist Church
Brighter Day Charities
Roberson Family
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
