CSS fluid layout with sidebar
So it seems that a lot of people are trying to achieve this. More and more people are becoming aware of CSS and its awesomeness and I think it’s about time. We’re not in 1996 anymore.
Then, getting a nice horizontally fluid layout isn’t very easy for most. If you try pixel widths, you can’t make it fluid, if you use percentages, borders start to mess things up and it’s not sharp enough.
I’ve found this solution on the internet, though I can’t remember where.
Here is the html:
<body> <div id="sidebar"> Your sidebar here, menu, whatever </div> <div id="content"> Your content, headers, all kinds of fun. </div> <div id="footer"> footer text. </div> </body>
And here is the CSS:
#sidebar { width: 250px; /* whatever width you want in pixels or % */ float: left; } #content { margin-left: 250px; /* same as the #sidebar width or more if you want space */ }
And there you have it. You can mess around with width and all that. You just have to make sure that your next div (#footer) is cleared on both sides (clear: both;) or your content might be over the next divs.
So that’s it. Now you only have to have designer talents and you can build awesome sites with sidebars. You can easily add a sidebar on the right with the same method, but floating your div on the right. My sidebar is currently working that way, you can look at the code.
Have fun with it.
September 2nd, 2008 at 15:56
cool site. Nice with css