Title: CSS layout imprecision Last modified: August 18, 2016 --- # CSS layout imprecision * [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/) * First, feel free to criticize and comment on my blog, located at: * [http://www.martinbreton.com](http://www.martinbreton.com) * Second, I have a problem. * Those of you surfing my blog in Firefox or Opera should not see any problem with the layout, but those who (God forbid) use IE will see what I mean. Since quite a lot of visitors use IE, I would appreciate my problem to get solved. I’ve tried a few things unsucessfully, but since I’m no CSS guru, I’d like your input. * My blog is bilingual. Since I do not wish to use something like a language switcher, I decided my blog would have two columns, one in either language. * To implement this, I used two div elements one called “colgauche” one called “ coldroite” (yeah… french!). They both have slightly different CSS definitions. I’m reproducing them here for simplicity’s sake. * .colgauche { text-align:justify; float: left; width: 49%; } * .coldroite { text-align:justify; width: 49%; margin-left: 51%; } * So this works in Firefox and Opera, but in IE, the right column is wrongly placed vertically. * How should I proceed to fix this? * I’m open to other suggestions than these div. Anything, but tables, if possible. I just want it to work. * Thanks! * brem aka proxi Viewing 13 replies - 1 through 13 (of 13 total) * [pcmt](https://wordpress.org/support/users/pcmt/) * (@pcmt) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258679) * Try setting your “.coldroite” with float:right and with no left margin. What I think is happening is that IE is seeing “.coldroite” with a width of 49% plus the left margin, and is forcing it beneath “.colgauche”. * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258684) * The problem if I do a float: right; is that what comes underneath the two columns will be placed BEFORE the two columns… because the rest of the text is not floating. Floating and non-floating items seem to not blend too well that way. Or do I miss something? * [moshu](https://wordpress.org/support/users/moshu/) * (@moshu) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258688) * In cases like this the best thing is to use a “container” for the droite and gauche; and have the sidebar outside of that container. So, you’ll float the gauche and droite _inside_ the container and they will not mess with the rest of the site. * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258690) * That’s what I’m doing… I think. 🙂 * I have a div called container which contains the text and also the two div colgauche and coldroite. * Can you illustrate with a little example? * thanks! * brem * [pcmt](https://wordpress.org/support/users/pcmt/) * (@pcmt) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258696) * moshu is right. Put your colgauche and coldroite inside their own container with nothing else inside, then the left and right floats should work without disturbing anything else. * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258716) * I’ll try that. * brem * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258727) * The thing is, I have an icon to the top right, for each category. How do I place my div s so that I have a 100px column at the right? * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258729) * I tried many things… but I can’t make it work in all 3 browsers (IE, Opera, Firefox) at the same time. * Can someone tell me how I should proceed to: * Have a section to the right with an icon, fixed at 100 pixels that will have a different icon for each category (that is already implemented, but not the layout). * To the left, the text, in two columns of equal width take up the rest of the space. * I don’t know how to tell a div that it has to take up 100%-100px width. * CSS sucks that way. *sigh* * help! * [http://www.martinbreton.com](http://www.martinbreton.com) * brem * [uberwerks](https://wordpress.org/support/users/uberwerks/) * (@uberwerks) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258883) * I’m no CSS expert, but I have had quite a time getting IE and Firefox to look alike with my site. * I had your problem with my sidebar being thrown under my main text area and it all came back to my “width”‘s. My site has a structure where the content and the sidebar are “wrapped” under a container (700px wide). Within that container I specified that my sidebar be 200px and my content be 500px. If my sidebar was over (due to margin: or padding:) it was thrown down below the content. * Again, I’m no expert by any means, but I hope this gives you some ideas. I didn’t use %’s like you do either, so I’m not sure if that will help you or not. * [kickass](https://wordpress.org/support/users/kickass/) * (@kickass) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258884) * IE always needs a bit more room. Narrow your columns (and their wrapper) a bit. Keep narrowing bit by bit until you get the right behavior. * [kickass](https://wordpress.org/support/users/kickass/) * (@kickass) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258885) * oh, and don’t forget to use display: inline; on the floats, so IE doesn’t double any margins, which would also cause this. * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 9 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258887) * I did a little layout refactoring. I said the container of the two columns are now fixed at 80%. I personally find it totally crappy coding, but it’s still better than the display I had before in IE. * Any comments on my “new” layout? * thanks folks. * Thread Starter [proxi](https://wordpress.org/support/users/proxi/) * (@proxi) * [20 years, 8 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258904) * Can anyone criticize and tell me what I could / should improve on the layout? * I’m not entirely satisfied, but at least it looks half way decent on IE now. * thanks folks. * brem Viewing 13 replies - 1 through 13 (of 13 total) The topic ‘CSS layout imprecision’ is closed to new replies. ## Tags * [columns](https://wordpress.org/support/topic-tag/columns/) * [layout](https://wordpress.org/support/topic-tag/layout/) * [two](https://wordpress.org/support/topic-tag/two/) * 13 replies * 5 participants * Last reply from: [proxi](https://wordpress.org/support/users/proxi/) * Last activity: [20 years, 8 months ago](https://wordpress.org/support/topic/css-layout-imprecision/#post-258904) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics