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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating DIVs and screen wrap

    I have a page that displays 1-10 lists of items, depending on the state of some check boxes. If all 10 boxes are checked, all 10 lists are displayed. Each list is defined within DIV tags with the style float:left. There are no table or span tags on the page. If the browser window is wide enough, the lists are displayed side-by-side, like this:

    If the user narrows the browser window, the lists wrap around. When each DIV has the same height, they wrap just fine, and everything lines up. However, if the height of each DIV is varied to accommodate the content of the list, as shown above, they don't wrap correctly, producing something like this:

    The green list is caught against the right edge of the pink list, keeping it from being positioned all the way to the left. What I want is for the top edge of each DIV to line up, whether side-by-side or wrapped, producing output like this:

    Is there anything else I can add that will make things wrap the way I want them to? I want to avoid tables, so that the user can resize the browser window and have all of the lists appear side-by-side, if there's enough screen real estate, or stacked, if there's not.

    Thanks for your time.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do they have a set width? I don't think letting them wrap is the best choice. Then it gets a little confusing. Side by side at all times IMO is better at least from a user point of view. Maybe give them percentage widths or something. If they are a pixel width put a containing div around them that matches their combined width.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, AE. Thanks for replying. They all have fixed widths. The number of lines in each list is also fixed, but some have 130 lines and some have only 75. If I set the height of each div to accommodate 130 lines, I have a lot of wasted space on the lists that only have 75 lines. If the user has chosen to hide all lists except for one with 75 lines, she sees this huge inexplicable area of empty space at the bottom of the list. I'd like to avoid that.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    or if you wan tto try it out:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>art photo image visual perception</title>
    <style type="text/css">
    #content {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    }
    #content div {
    display: inline-block;
    display: -moz-inline-grid;
    _display: inline-block;
    width: 75px;
    margin: 10px;
    background: #ccc;
    }
    </style>
    </head>
    
    <body>
    <div id="content">
    
    <div><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li></ul></div>
    <div><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></div>
    
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Harbinger, that produces the effect I was looking for. I'll give it a try.

    UPDATE: Oops, except in IE6, which displays all divs stacked into a single column...
    Last edited by Catatonic; 11-03-2006 at 11:39 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    okay, hmmm... it looks like IE doesnt like it. another try showed weird results.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>art photo image visual perception</title>
    <style type="text/css">
    #content {
    width: 80%;
    margin: 0 auto;
    border: 2px solid #000;
    text-align: left;
    }
    
    #content span {
    display: -moz-inline-grid;
    _display: inline-block;
    width: 150px;
    margin: 10px;
    background: #ccc;
    }
    </style>
    </head>
    <body>
    <div id="content">
    <span><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></span>
    <span><ul><li>stuff</li><li>stuff</li></ul></span>
    <span><ul><li>stuff</li><li>stuff</li><li>stuff</li></ul></span>
    <span><ul><li>stuff</li><li>stuff</li><li>stuff</li><li>stuff</li></ul></span>
    <span><ul><li>stuff</li></ul></span>
    </div>
    </body>
    </html>
    it appears the IE likes them to all have the same height to play nice. I tried numerous things and couldnt find a non-table solution.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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