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


Tags: html,css,html-lists

Problem :

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?



Solution :

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.


    CSS Howto..

    How to Vertical align text in div

    how to vertical align div elements using CSS?

    Angular 2: How to change an element’s CSS class onclick and to remove all others (Plnkr)

    How to make width of element full width of screen and not parent css

    How to make this kind of border css? [closed]

    How to center a single character both vertically and horizontally in a square div

    How to make an entire square div clickable with CSS?

    jQuery Show/Hide for and

    How to change iframe pages without the parent page changing with external links using CSS

    How to alter CSS properties using PHP based on a conditional

    how to make button with image responsive

    How do I make a jQuery animation work across major browsers?

    How to set 0% css of keyframes as current css value for the element?

    How to select the first, second, or third element with a given class name?

    CSS flipping animation in IE: Turned side shows mirror content

    how to select last element in the page?

    How to make a background header image extend to full width of browser

    HTTPS and how to reference files and images

    How to use CSS to control the style of an HTML unordered list?

    How to show/hide content based on a css class

    How can i position a background image to the top left and bottom right of a html element?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How to create a clickable block?

    How to make Chrome and IE display block hyperlinks correctly

    How to recalculate the css url paths when moving it to a different folder

    How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located

    How to check if two elements are toggled using Jquery?

    How to change the active color of the tabs title background using css

    how to style a symfony2 form button

    Ionic2 : How to set up css in single page