CODEWITHSUNDEEP
htmlcsshtml-lists
WSkinner
WSkinner

Reputation: 2217

How can I make LIs push their siblings to the same height?

I'm working on a navigation control. I have nested lists which creates this:

enter image description here

What I would like to achieve are rows that have a common height. For example, "Blood Donor Center" and "Cancer" would take up one row and have the height of "Blood Donor Center". Then "Diabetes" and "Emergency Care" would share a row and so on...

Here is a subset of the HTML:

<div id='health-services-flyout'>
                <ul >
                    <li class="first">
                        <a href="/torrance/pages/Blood-Donor-Center.aspx">
                            Blood Donor Center
                        </a>
                        <ul >
                            <li class="first">
                                <a href="/torrance/pages/Blood-Donor-Center-services.aspx">
                                    Services
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-blood-facts.aspx">
                                    Blood Facts
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-faq.aspx">
                                    Frequently Asked Questions
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/Blood-Donor-Center-half-gallon-club.aspx">
                                    Half Gallon Club
                                </a>
                            </li>
                            <li class="last">
                                <a href="/torrance/pages/Blood-Donor-Center-hiv-testing-sites.aspx">
                                    HIV Testing Sites for Los Angeles County
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li >
                        <a href="/torrance/pages/cancer.aspx">
                            Cancer
                        </a>
                        <ul >
                            <li class="first">
                                <a href="/torrance/pages/cancer-treatments.aspx">
                                    Services
                                </a>
                            </li>
                            <li>
                                <a href="/torrance/pages/imaging-Locations.aspx">
                                    Conditions
                                </a>
                            </li>
                            <li>
                                <a>
                                    Our Team
                                </a>
                            </li>
                            <li class="last">
                                <a>
                                    Patient & Family Support
                                </a>
                            </li>
                        </ul>
                    </li>

And the CSS:

#health-services-flyout ul > li {
    float: left;
    width: 200px;
    display: block;
    line-height: 20px;
}

#health-services-flyout ul > li.last {
    clear:left;
    float:none;
}


#health-services-flyout ul > li > a, #health-services-flyout ul > li > a:visited, #health-services-flyout ul > li > a:hover {
  font-size: 11px;
  color: #333333;
  text-decoration:none;
  font-weight:bold;
}

#health-services-flyout ul > li > a:hover {
    text-decoration: underline;
}

#health-services-flyout ul > li > ul {
  float: none;
}


#health-services-flyout ul > li > ul > li {
    clear: left;
    display: block;
    float: none;
    font-weight: normal;
    line-height: 16px;
}

#health-services-flyout ul > li > ul > li > a, #health-services-flyout ul > li > ul > li > a:visited, #health-services-flyout ul > li > ul > li > a:hover {
    color: #004A89;
    font-size: 9px;
    font-weight: normal;
    text-decoration: none;
}

#health-services-flyout ul > li > ul > li > a:hover {
    text-decoration: underline;
}

How can I achieve this?

Upvotes: 2

Views: 139

Answers (1)

Jordan Speizer
Jordan Speizer

Reputation: 573

If you give the first li of each new row a class with the CSS of "clear:both", it should work.

Check this out and see if it's what you're looking for: http://jsfiddle.net/UCHXt/

The HTML is a bit difficult to look through, but look for the li with the class of "second". That should help.

Upvotes: 1

Related Questions