JavaScript and client side scripting.
Moderator: General Moderators
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Fri Mar 16, 2007 11:54 am
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?
matthijs
DevNet Master
Posts: 3360 Joined: Thu Oct 06, 2005 3:57 pm
Post
by matthijs » Fri Mar 16, 2007 12:04 pm
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.
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Fri Mar 16, 2007 12:05 pm
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)
Christopher
Site Administrator
Posts: 13596 Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US
Post
by Christopher » Fri Mar 16, 2007 2:21 pm
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;
}
(#10850)
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Mar 16, 2007 2:26 pm
Static width.
Ugh.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360 Joined: Thu Oct 06, 2005 3:57 pm
Post
by matthijs » Fri Mar 16, 2007 2:29 pm
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;
}
Kieran Huggins
DevNet Master
Posts: 3635 Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:
Post
by Kieran Huggins » Fri Mar 16, 2007 3:39 pm
I love static widths - makes it so much easier to layout content.
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Fri Mar 16, 2007 4:11 pm
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.