On this page: http://www.davidclick.com/practice/news.html I’d like to know why i cant just float one column to the right to create a two column layout. Put another way why do i have to float both columns left and right to create the desired effect, in my head I just cant understand why floating both the content div and sidebar div is necessary.
A float will appear at the level (height) of its following sibling element. so to put two elements at the same level, the float should always come first regardless of which side it floats.
As you saw, putting the float after placed it below its previous sibling in the flow.
Be very careful with not floating one of the columns if that non floated column will contain elements with ‘clear’ applied. Any elements with clear applied will clear all floats and not just the float in the current container. That means the content in your left column will suddenly drop below the bottom of the right floated column and break your layout.
Floats create ‘new block formatting’ contexts and any ‘clear’ properties are confined to that context and do not affect floats outside. Therefore for your example** the only safe approach** is to float both columns or to add an inner wrapper to the left column and set overflow:hidden which also creates a new block formatting context. Of course this once again means you are making a guess as to whether you will need visible overflow and is another fragile approach.
Good layouts accommodate all content and you should be using an approach that won’t fail should you forget that you can’t have certain elements inside.
However, I have to question the use of floats in this day and display table and display:table-cell will give more robust layouts back to ie8. If modern browser support only is needed then flexbox will do the trick also.
Floats are ok for columns but you need to understand the implications and limitations of using them.
To float or not to float?
Depends on the layout you want. If you want both columns equal height, filling the parent container top to bottom, I would forget float and use display table or flex box.
I will use a float if the main content is longer than the sidebar and I’m being economical with my space and want the main content to wrap beneath the sidebar after it has finished. If you do this, be sure to add a ‘clearfix’ just in case the sidebar ends up longer than the main content.
Well done.
The next step is to add a media query to revert back to blocks on a mobile screen at the point the columns get too narrow.
You could add a max-width query and re-set to display: block and re-set any widths to auto.
Or you could try the ‘mobile first’ approach and only set display table/cell/width in a min-width query without the need for re-setting anything back to its default.