Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

3 Column Site Columns Floated Left But Not Appearing in Correct Order

3 Column Site Columns Floated Left But Not Appearing in Correct Order


I'm working on a 3 column site which I am converting to a RWD and which was previously laid out with nasty neg px margins but I am converting all this to percentages and em's so that the site will best suit a wide range of devices.

My problem is very similar to the post that can be seen here; HTML float right element order

I have tried what was suggested in this article by @bookcassey by placing all the Columns in a container which is floated right with all the child elements inside Floated Left but even doing this I still can't get the columns in order of #NavColumn #ContentColumn #ExtraColumn.

The HTML is

3 Col Page

Page Headline

Page Content, Images Lorem Upsim etc...
Extra Column Content

And the CSS

    margin:1em auto;
    max-width:60em; /*960px / Default Font Size of 16px = em result*/
    border:0.3125em groove #DDDDDD;

.InnerBG{float:right;/*border:3px solid red;*/width:100%;}


#Header .Liner{padding:0;}

#Header a.header-home-link{max-width:60em;display:block;}

#Header img{display:block;}

#ShareThis{width:100%;margin:1em auto 2em;}

#NavColumn, #ContentColumn, #ExtraColumn {float:left;}

#ContentColumn{max-width:62.50%;/*border:2px solid green;*/width:100%;}



Side Note: The colored columns were something I was trying to "See" each column

I've been through an untold number of tutorials and have been working on this for longer than I care to admit while trying every possible combination of CSS rules to no avail and if anyone knows how I could remedy the way the columns are displaying as can be seen here:, I'd be MOST appreciative and I thank each and everyone of you in advance.

Problem courtesy of: Stuart Y


I managed to do more or less what you were asking (except for your "Share This" column, which wasn't there) by putting the first two columns in the MidBG div, which I floated left. Then I floated the first column right, so that the second one ended up before the first one, and the third one ended up to the right.
I also had to remove lots of width:100%s, which messed things up.

See fiddle.

Not sure if this is what you wanted, but it is what you asked for...

Solution courtesy of: Mr Lister


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

3 Column Site Columns Floated Left But Not Appearing in Correct Order


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription