Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Row of divs not wrapping in IE

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <div style="float: left; width: 100px; height: 170px; margin: 10px; border: 1px solid rgb(204, 204, 204); background-color: rgb(230, 230, 230);"></div>
    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)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •