Row of divs not wrapping in IE

ladydi1984 · 09-06-2010, 01:39 PM

I've *finally* converted my website from table layout to CSS:

http://www.sparklements.com/problem.html

The problem I'm having is with the rows of items. I've just put a line of divs and let them wrap according to your browser size, thus filling up your browser rather than having lots of white space (if there's a better/more correct way of doing this please let me know!) In Firefox it looks just like I want, but in IE (I'm using v7) it only shows 6 divs per row resulting in 8 rows.

Code for the main center div is:

Code:

<div style="width:80%; height:200px; padding-left:185px; display:block; overflow:visible;">

Code for the individual items is:

Code:

<div style="float:left; width:100px; height:170px; margin:10px; border:#CCC 1px solid;">item 1</div>
<div style="float:left; width:100px; height:170px; margin:10px; border:#CCC 1px solid;">item 2</div>
<div style="float:left; width:100px; height:170px; margin:10px; border:#CCC 1px solid;">item 3</div>

Etc...

Is there any way to get the page in IE to look like it does in Firefox?

Many thanks
di

abduraooft · 09-06-2010, 02:59 PM

Quote:

First of all get rid of all inline styles, which may make debugging harder. use something like

Code:

<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
........
</div>

Code:

/*CSS file */
#wrapper{
width: 80%; height: 200px; padding-left: 185px; display: block; overflow: visible;
}
#wrapper div{
float:left; width:100px; height:170px; margin:10px; border:#CCC 1px solid; background-color:#e6e6e6;
}

Now, add a valid DOCTYPE at the top, without this, IE may turn into quirks mode. I'd recommend an HTML Strict one.

After that, add

Code:

*{margin:0;padding:0;}

into your CSS to remove all browser specific default values of margins and paddings from all elements.

If that doesn't fix the issue, please update the link and let's know.

PS: Since the wrapper doesn't have a fixed width, it may push the inner divs down to the next row, when the window width is reduced to 8x(100+10+10)

ladydi1984 · 09-06-2010, 04:18 PM

I'll be jiggered, that worked!

Only kink was what you mentioned last, the central boxes got bumped down to the next row below the "left navigation" (check link, I added text to identify that)...so I removed the "width:80%" and that fixed it...is it okay to not have a width on your div? because like I said, it all works great now, I've tried resizing the window (both IE and FF). Again if there's a better way let me know.

Thanks
di