Whenever I create my own personal web pages, I've always had this problem with using divs to create a multi-column layout. I use the float attribute to align them to the left or right, but when I make the browser window skinnier, the columns re-adjust where one column falls below the other and other things mess up with alignment. I would like the columns to stay put like all other websites do.
What is the best method for this?
You can use the min-width CSS command to specify the minimum width of your page. See this page for an example.
Why reinvent the wheel? There are a bunch of sites out there that offer free templates for exactly what you are trying to achieve. Check some of these out:
Hopefully these help you out!
Just set an explicit width for your elements. This should make them immune to any resizing.
div.clear { clear:both; }
#container { width:640px; }
#nav { float:left; width:200px; }
#content { float:left: width:440px; }
<div id="container">
<div id="nav">
<p>Hello World</p>
</div>
<div id="content">
<p>Hello World</p>
</div>
<div class="clear"></div>
</div>
I'll probably be downvoted into oblivion for this, but until IE6 is gone from the face of the earth, using a table for a multi-column layout is really the safest, easiest way to go. Sure, it's not the "right" way to do it, but in this case the reward for doing it the right way is so miniscule that you might as well just drop in a table and move on to more important things.
Don't get me wrong; I love CSS. I just think that the pragmatic choice for multi-column layouts is still the table. You'll spend less time fighting with browsers and have more time to focus on the things that will really benefit your website's consumers.
There are several possible explanations:
1) If you have a fluid container with fixed-width columns, the container will resize and the columns will no longer fit. You can add a set width to the container or you can make the columns fluid (%-based). You can even just make one of the columns fluid if you use Nicole Sullivan's approach here: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
2) If you are using an entirely fluid method already, but using IE6/7 to view it, you may be experiencing sub-pixel rounding errors at certain sizes. Nicole's approach solves that as well.
You don't need tables, just a bit of math.
The solution is not to use float for everything. Of course you can buy a template and "outsource" the problem, but usually the columnar layout of a webpage is attained using a combination of margins and positions (including negative values).
Or - of course - tables, but beware of losing semantic value of the HTML when you use them (for example screen readers and linear parsers will be confused).