Forum Moderators: not2easy
I am trying to render a sitemap in which every level 1 entry is one column with all deeper levels underneath like a list. The columns are rendered next to each other and I am just not getting the right hang of it extending them to the same height (for applying some background-image or border).
I would have expected that stretching the nested lists to 100% they would expand to the container's barrier... but.. no : (
Has anybody some insight on this? Any idea great appreciated : )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
<style> #some_wrapper{ border:1px solid blue; height:100%; }
ul{ border:1px solid red; float:left; height:100%; }
ul li{ display:block; float:left; height:100%; }
ul li ul{ border:1px solid green; }
ul li ul li{ display:block; float:none; }
</style>
</head>
<body>
<div id="some_wrapper">
<ul>
<li>level 1a
<ul>
<li>level 2a</li>
<li>level 2a</li>
<li>level 2a</li>
</ul>
</li>
<li>level 1b
<ul>
<li>level 2b</li>
<li>level 2b</li>
<li>level 2b</li>
<li>level 2b</li>
<li>level 2b</li>
<li>level 2b</li>
</ul>
</li>
</ul>
</div>
</body>
height: 100% sets the height to equal the height of the parent *if* the parent has a given height, otherwise it's the same as height:auto . Only the root element (the parent of <html>, has a height that's equal to the viewport without setting it yourself.)
So yes, height 100% will work, provided you have a fixed value to set on the parent. Since in most cases this isn't true and you want the parent to stretch to the height of it's highest child, you need to do two things:
Yes, that makes sense. I am a little confused about the floats' height though. As you see in my little example, the borders (red) indicate a correct height of the parent (although its floating), but still the children won't stretch.
Adding something the float, that got the clear would probably break the UL/LI validity, and unfortunately I have to apply that background-image per individual column : /
So I guess I have to let go of the ULs here...?
But the 100% height only works in reference to a parent with a height defined in your CSS (other than auto), so it the end it'll not work for what you seek.
Still: a <br class="clear" /> after the last </ul> and before the </div> should validate just fine even in strict xhtml1.
Take care with default padding and margins on lists, you might want to get rid of them as they'll mess you up between browsers (some use margins, others use padding)
For anybody interested in the outcome.
I went back to wrap some table cells around the level 2 lists (thus eliminating the level 1 UL). This way I had a container to which I could apply the whole background image to, so it will stretch to the maximum level 2 height for each level 2 entry.
Document flow doesn't change, so that's ok.
