Hi All,
I’m trying to set up a layout that is quite complex. I have a set of nested lists. The nested lists should be shown next to the list ite, the way they also would in a vertical dropdown menu. Note that only One list can be visible at a time at any of the three levels. Like so:
___________
| subject1 |
|___________|
| subject2 |
|___________|___________
| subject3 |subject |
|_[U]selected[/U]__|description|
| subject4 |[U]1[/U]__________|____________________
|___________| selected | chosen activity |
| subject5 |___________| box 1 |
|___________|subject | |
|description|____________________|
|3 | chosen activity |
| |_____[U]box[/U]_[U]2[/U]__________|
| |
|___________|
Solution 1 - Position absolute >> wrappers don’t stretch with the content…
Now that could be easily solved with a position: absolute on the nested ul elements and a position:relative on their parent li elements. That however would remove the nested lists from the flow of the document, which would collapse any wrapper element to the height of the first-level list (the one containing the subjects). In my example, I show a situation where the nested lists extend below the bottom of the last subject li-element. So I would want any wrapper elements to expand to that size. So, absolute positioning will not do. I shall have to resort to floats.
Solution 2 - Floats >> wrappers do stretch with the content, but IE7 gives me headaches.
Using floats you can get the same results, but the wrappers do expand to the height of all the descendant lists. I do this by giving float: left to the divs that contain the subjects and subject descriptions (see code below) and float: right to the nested uls. To make the wrapper div expand its height to fit all the content, I use an :after-selector on it and insert some dummy content with clear: both on it. I tried to give the wrapper div an overflow: auto property to give it the proper height, but this caused some scrollbar-issues, hence the :after solution.
And well, this works! In Chrome, FF, IE8 and IE9, that is. In IE7—which I have to support—the subject li-elements expand to the size of the descendant lists. Why does IE7 behave differently here? And can this problem be solved? Please see screendumps from IE9 (Browser Mode: IE7) and Chrome.
Sidenote 1: why does the 20px margin-top that is set to the subjects list push the wrapping element down instead of the list inside the wrapping element in all browsers but IE7? I would expect IE7’s behaviour…?
Sidenote 2: why does IE7 show whitespace between the subject li-elements?
I hope someone here may be able to help me out! Any help would be appreciated!
Best regards,
Martijn.
The images are attached, somehow the uploader to place them in the post couldn’t load them.
Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
background: #0f0;
width: 960px;
}
.subjects, .subjectDescriptions, .chosenActivityBoxes {
list-style: none;
margin-left: 0;
padding: 0;
}
.subjects {
margin-top: 20px;
}
.subjectDescriptions, .chosenActivityBoxes {
float: right;
}
.subject, .subjectDescription {
float: left;
}
#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.subjects ul {
display: none;
}
.subjects ul.visible {
display: block;
}
.subjects > li {
width: 162px;
background: #f39;
}
.subject {
background: #0ff;
width: 162px;
height: 100px;
}
.subjectDescriptions {
background: #ff8800;
margin-right: -200px;
width: 200px;
}
.subjectDescription {
background: #0088ff;
}
.chosenActivityBoxes {
margin-right: -400px;
width: 400px;
background: #ff0;
}
</style>
</head>
<body>
<div id="container">
<ul class="subjects">
<li>
<div class="subject">
Subject 1
</div>
<ul class="subjectDescriptions">
<li>
<div class="subjectDescription">
SubjectDescription1.1
</div>
<ul class="chosenActivityBoxes">
<li>chosenActivityBox1.1.1</li>
<li>chosenActivityBox1.1.2</li>
<li>chosenActivityBox1.1.3</li>
<li>chosenActivityBox1.1.4</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="subject">
Subject 2
</div>
<ul class="subjectDescriptions visible">
<li>
<div class="subjectDescription">
SubjectDescription2.1
</div>
<ul class="chosenActivityBoxes visible">
<li>chosenActivityBox2.1.1</li>
<li>chosenActivityBox2.1.2</br></br></br></br></br></br></br></br></br></li>
</ul>
</li>
<li>
<div class="subjectDescription">
SubjectDescription2.2</br></br></br>
</div>
<ul class="chosenActivityBoxes">
<li>chosenActivityBox2.2.1</li>
<li>chosenActivityBox2.2.2</li>
<li>chosenActivityBox2.2.3</li>
</ul>
</li>
<li>
<div class="subjectDescription">
SubjectDescription2.3
</div>
<ul class="chosenActivityBoxes">
<li>chosenActivityBox2.3.1</br></li>
<li>chosenActivityBox2.3.2</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="subject">
Subject 3
</div>
<ul class="subjectDescriptions">
<li>
<div class="subjectDescription">
SubjectDescription3.1
</div>
<ul class="chosenActivityBoxes">
<li>chosenActivityBox3.1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>