Page 1 of 1
two-column layout issues
Posted: Fri Mar 16, 2007 11:54 am
by Luke
I've always set up my two-column layouts something like:
Code: Select all
<div id="container">
<div id="column_left">
<!-- content //-->
</div>
<div id="column_main">
<!-- content //-->
</div>
</div>
Code: Select all
#column_left
{
width: 200px;
float: left;
}
#column_main
{
padding-left: 200px;
background: #fff url(../faux_column.gif) repeat-y;
}
And it works fine except when I need to float/clear things in the main column in which the fact that the left column is floated causes issues with the main content clearing it. It's just a pain in the rear... is there a better way you guys know of?

Posted: Fri Mar 16, 2007 12:04 pm
by matthijs
Code: Select all
#column_left
{
width: 200px;
float: left;
}
#column_main
{
margin-left: 200px; /* probably should take a bit more, like 210px */
background: #fff url(../faux_column.gif) repeat-y;
}
Or do a float:right; on column_main, but that's assuming a fixed width.
Posted: Fri Mar 16, 2007 12:05 pm
by Luke
but if you do it like that (with margin) you can't use the
faux-column technique.
EDIT: lol I guess you can... just not the way I was doing it (I just read the article I linked to)

Re: two-column layout issues
Posted: Fri Mar 16, 2007 2:21 pm
by Christopher
Why not just:
Code: Select all
<div id="container">
<div id="column_left">
<!-- content //-->
</div>
<div id="column_main">
<!-- content //-->
</div>
</div>
Code: Select all
#container
{
width: 500px;
}
#column_left
{
width: 200px;
float: left;
}
#column_main
{
width: 300px;
float: right;
}
Posted: Fri Mar 16, 2007 2:26 pm
by pickle
Static width.
Ugh.
Posted: Fri Mar 16, 2007 2:29 pm
by matthijs
Code: Select all
#container
{
width: 50em; /* or px, or % */
}
#column_left
{
width: 30%;
float: left;
}
#column_main
{
width: 60%; /* or some other "golden-Ratio"-like typographically responsible ratio :) */
float: right;
}
Posted: Fri Mar 16, 2007 3:39 pm
by Kieran Huggins
I love static widths - makes it so much easier to layout content.
Posted: Fri Mar 16, 2007 4:11 pm
by Luke
I don't hate static widths. I've said this at least a million times, but I'll say it one more time. I like fixed-width layouts for sites that cater well to fixed-width sites. Information-rich sites such as this one do not belong in a fixed-width site, however. They just don't work well.