Why float both?

Hi from pitch black wet and freezing York UK,

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.

body {
	margin: 0;
	padding: 0;
}

#wrapper {
	color: #F30A0E;
	border: 5px solid red;
	width: 80%;
	margin: 0 auto;
}
#content {
	width: 60%;
	border: 5px solid green;
	float: left;
}

#sidebar {
	width: 20%;
	border: 5px solid pink;
	float: right;
}

#navigation {
	border: 5px solid black;
}

#footer {
	clear: both;
	border: 5px solid orange;
}

Thanks in advance,
David

Me too :smiley:
What’s stopping you just floating the sidebar?

Probably the order of the content in the HTML. The sidebar probably doesn’t come first like it has to for not floating the content to work.

1 Like

Ok here goes…

I admit I did not even look at the html code.
Having the sidebar first and floated right should do the trick.

Hi Sam that didnt work:-( Now reverting to old code :slight_smile:

Did putting the sidebar before the content not work?

@SamA74 Yes that worked :slight_smile: Thank you! Never thought of changing the HTML order!

Potential dumb question but why did the order of the HTML make all the difference?

Just guessing here, but the left content doesn’t know where to flow until the float is positioned, so it needs to come first.

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.

1 Like

Nice one Sam, grazie mille!

Neither did I - just that’s the most obvious cause of that particular issue.

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.

5 Likes

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.

6 Likes

Thanks Paul, really appreciate the css theory. I’ll learn the display table approach :slight_smile:

Brillliant, big thanks Sam :slight_smile:

@PaulOB Found this tutorial http://www.sitepoint.com/solving-layout-problems-css-table-property/ Now I am the proud owner of a non floated column layout using the table property :slight_smile: Thank you for the tip :slight_smile:

1 Like

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.

Thanks Sam, media query is on my “must learn” list. I know I need to understand the responsive element of design!

Just wonder if there is a guide out there that gives me the max width etc to set for different devices so I can begin the learning :slight_smile: