...

View Full Version : Floating DIVs and screen wrap



Catatonic
11-03-2006, 10:01 PM
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:
http://img174.imageshack.us/img174/3369/div1qr8.jpg
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:
http://img174.imageshack.us/img174/8224/div2fb9.jpg
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:
http://img174.imageshack.us/img174/9946/div3jp1.jpg
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.

_Aerospace_Eng_
11-03-2006, 10:09 PM
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.

Catatonic
11-03-2006, 10:16 PM
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.

harbingerOTV
11-03-2006, 10:19 PM
or if you wan tto try it out:



<!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>

Catatonic
11-03-2006, 10:24 PM
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...

harbingerOTV
11-04-2006, 05:56 PM
okay, hmmm... it looks like IE doesnt like it. another try showed weird results.


<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum