Hi guys,
I'm in a bit of a bind here. I have a nested list that I have no control
over - it's coming out of the CMS with this hierarchy and I can't change
that. Here is an example of the unstyled list:
- Main Navigation
--- Page 1
--- Page 2
--- Page 3
--- Subscriber Modules
----- Module 1
----- Module 2
----- Module 3
----- Module 4
So as you can see, Subscriber Modules sits at the same level as the pages
and has its own sub-list of modules.
The trouble comes when I get asked to have the "two lists" (pages and
subscriber modules) displaying side-by-side. I've managed to give the two
"top level" <li>'s (Main Navigation and Subscriber Modules) different
classes, so I can treat them differently from standard list items, but
making them line up beside each other is proving problematic.
First I tried:
.mainNav {
float: left;
}
.subMod {
float: right;
}
The trouble with this is that the .subMod list is only moved off to the
right from where it was - it still sits below all the pages. The only way to
get it level with the top of the .mainNav list would be to move it a set
amount upwards, and since there can be a variable number of pages that is
just not practical.
So then I tried:
.mainNav {
position: relative;
}
.subMod {
position: absolute;
top: 0;
right: 0;
}
This works fine to get them lining up correctly, but since there are more
subscriber modules than pages the bottom of the list doesn't appear in the
correct place. So I went searching for information on "clearing" absolutely
positioned elements. I found this page (
http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute)
which looked promising, but it requires setting the position of the tallest
element to relative and in this case that is the one that needs to be
absolute.
Can anyone suggest a way that I can bring these two lists into the format
I've been requested to?
Cheers,
Seona.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
