Title: Weird Div Float Alignment Last modified: August 19, 2016 --- # Weird Div Float Alignment * Resolved [asdf](https://wordpress.org/support/users/jbrndt/) * (@jbrndt) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/) * Alright, I made a layout with a left sidebar, and made the mistake of not putting content in the sidebar until almost the end. * Anything I put in the sidebar is making the content on the right side drop below it (In IE6 and 7 at least). It’s fine in Firefox. * Any idea why it is doing this? I’ve tried making the div width smaller and floating left and right, etc. If you could please take a quick look I’d be grateful. Thank you. * The mockup is at [http://tradebur.com/](http://tradebur.com/) Viewing 8 replies - 1 through 8 (of 8 total) * [jberghem](https://wordpress.org/support/users/jberghem/) * (@jberghem) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779027) * Change the width of your `entrybodyhome` selector in the CSS file. * Thread Starter [asdf](https://wordpress.org/support/users/jbrndt/) * (@jbrndt) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779030) * Same result, thanks for trying. * Changed it to 100px, floating right and left. I was thinking the same thing, that it was just to large and being pushed below, which something is obviously, but that’s not why oddly enough. Probably an empty div with a width that IE is using and not Firefox. * I’m thinking it might have something to do with the gray stretching div also, but unable to see any changes altering it. (.graybar) * Currently rewriting the theme from scratch, instead of using an old theme and converting it. If the site looks not complete and not described as above, refresh in a few seconds. * I really dislike IE. * [jberghem](https://wordpress.org/support/users/jberghem/) * (@jberghem) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779038) * Try it the other way around. Placing the side column at the bottom of your HTML file and float it to the top. Like this: XHTML * ```

post title

post message etc.

``` * CSS * ``` #wrapper { width: 800px; margin-right: auto; margin-left: auto; } #content { float: right; width: 80%; margin: 0px; } #navi { margin: 0px; width: 20%; } #footer { clear: both; } ``` * Good luck * [jberghem](https://wordpress.org/support/users/jberghem/) * (@jberghem) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779039) * > I really dislike IE. * Ain’t that the understatement of the year!! * Thread Starter [asdf](https://wordpress.org/support/users/jbrndt/) * (@jbrndt) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779042) * Facepalm. Switching the order of the sidebar worked, that’s all I had to do. Why didn’t I think of that. Thank you so much! * Thread Starter [asdf](https://wordpress.org/support/users/jbrndt/) * (@jbrndt) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779043) * Another thing that you might be able to help with. * The spacing between the list on the right content area on the homepage. There is no spacing between the list items in Firefox, but there are in IE. Without using a separate stylesheet, do you know of any solution to fix this? Removing the spacing in IE that is. * [jberghem](https://wordpress.org/support/users/jberghem/) * (@jberghem) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779050) * That’s in IE6 and earlier versions. IE7 and IE8 beta don’t have this problem anymore. IE6 treats margins differently than other browsers. If you have top margin of 10px on your list items and a 15px bottom margin FireFox, Opera, IE7& 8 and other browsers will overlap the top and bottom margin and you’ll have a 15px space between the list items. IE6 adds them up so you end up with a 25px space between list items. * There are CSS hacks but I don’t like them because you never know what they’ll do in new browsers that come out. If you’re not putting borders around your list items and/or using different background coloring for them you could create the space with padding instead of margin and it will look the same in IE6. But if you really need margins create a separate style sheet but only put the margin code in it to override the default stylesheet. * I explained how to do this in this post: [http://wordpress.org/support/topic/171461](http://wordpress.org/support/topic/171461) * Thread Starter [asdf](https://wordpress.org/support/users/jbrndt/) * (@jbrndt) * [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779057) * Thanks I’ll look into that. Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Weird Div Float Alignment’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [div](https://wordpress.org/support/topic-tag/div/) * [floats](https://wordpress.org/support/topic-tag/floats/) * [IE6](https://wordpress.org/support/topic-tag/ie6/) * 8 replies * 2 participants * Last reply from: [asdf](https://wordpress.org/support/users/jbrndt/) * Last activity: [17 years, 10 months ago](https://wordpress.org/support/topic/weird-div-float-alignment/#post-779057) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics