Spaced Out Columns
In the comments for my A List Apart article, Fredrik Frodlund mentioned he was “not sure it would work if you use blocks that have white space between them
”. There actually was a demonstration of this in the three column example with the nested two column layout. I only quickly commented on it, so I thought I would expand on it here.
The HTML
<div id="container">
<div id="content">Content</div>
<div id="rail">Rail<br />Content</div>
</div>
The CSS
#container{
float:left;
width:500px;
background-color:#ddd;
border-right:210px solid #900;
}
#content{
float:left;
width:500px;
border-right:10px solid #fff;
margin-right:-10px;
position:relative;
}
#rail{
float:left;
width:200px;
border-left:10px solid #fff;
margin-right:-210px;
position:relative;
}
The markup is pretty straight forward so I won’t go into that. As for the CSS, I set the width of the container to the width of the main content area. Then add the border which is the width of the rail plus the width of the gap. The colors are also set on the container. It is also floated to enclose the floats.
For the content area, I float it to allow the columns to run side by side, set the width, and give it a border the width and color of the gap. Then I set margin-right to negative the gap, freeing up the space for the rails gap border to overlap it. Setting position:relative makes sure everything stacks up correctly.
The rail is almost the same as the content. Float it, position it, set the width and the border for the gap. Then, setting margin-right to negative the rail width plus the gap width allows it to float along side the content. The gap borders then overlap and grow with whichever column is tallest.
A working examlple can be found here, and a left rail version here. The only differences between the right and left versions are the side the various borders are on, and the negative margin on the content is now the content width on the right and the gap width on the left. This is assuming content before rail in the source.
I have not been able to make this work for a three column layout if there are gaps between all three columns. The gaps only appear if the content is tallest. Putting the gap between two columns works fine. Also, currently this only works for fixed width layouts, elastic should also work but I haven’t tested it. I will post an update on liquid layouts in the next week or so.
Hey Alan,
Excellent site! I’m a beginner blogger who’s grappling with this too-short sidebar thing. Have tried different bits of sidebar background image codes — placing it diffent places and with/without repeat — but nothing has worked.
If you can, please take a look at my site and let me know how I can achieve a “filled-in” look at the bottom of my sidebar.
I’m wondering if I have too many background images overall, or if one’s cancelling another.
Thanks!
http://southsidestar.blogspot.com
Hey Alan,
Thanks so much for getting back!
I fixed the above mentioned sidebar background issue, but not the way I’d wanted. I’d wanted to keep that show-thru space between the main and sidebar, but just couldn’t get it to work for the side bar length. I’m satisfied with it, though.
BTW, I interviewed with your wonderful company a year ago. Didn’t work out, unfortunately, but it was a great experience!
Very interesting reading, especially.
This solution is excellent however when I pull the css out off the html file and link the html to the css file it fails to work.
Any idea? What am I doign wrong?
Thanks,
Lise
Hello! Good Site! Thanks you! mjrjzrunitwwpb
nice site! visit my homepage
<a href="http://www.ourworldisnotforsale.org/images " rel="nofollow">porn family</a>
<a href="http://www.ourworldisnotforsale.org/aspnet_client " rel="nofollow">fucks sister</a>