CODEWITHSUNDEEP
htmlcss
Tony
Tony

Reputation: 10327

Formatting a horizontal list of lists, how to fix the height of dynamic html

I'm creating a Site Map type of menu to sit at the bottom of the page, giving quick access to the first two levels of the site structure. However I'm having trouble formatting the lists so they neatly display when wrapped.

Here's a picture of what I'm trying to get to: Desired footer menu layout

However, what I end up with looks like this: Badly formatted list

Here's the code simplified to show the problem, and a link to a JSFiddle

<html lang="en">
<head>
    <style type="text/css">
        #footer-menu { 
            float:left; 
            background:#454545; 
            color:#FFFFFF; 
            width:850px;
            margin:50px auto 0 auto; 
            padding:10px 10px 2px 10px; 
            display:inline;
        }
        #footer-menu ul { 
            padding:0; 
            list-style-type:none; 
            left:auto; 
            overflow: auto; 
        }
        #footer-menu li { 
            margin:0 20px 5px 0; 
            padding-left:6px; 
            list-style-type:none; 
            float:left; 
            display:inline; 
            background:none; 
            position:relative; 
            font-family:Arial; 
            font-weight:bold; 
            border-left:1px solid #FFFFFF;
        }
        #footer-menu ul li ul {
            margin:5px 0 5px 0;
        }
        #footer-menu ul ul li {
            float:none; 
            padding:0; 
            margin:0 0 2px 0; 
            font-weight:normal; 
            display:block; 
            width:auto; 
            border:0;
        }
        #footer-menu a { 
            text-decoration: none; 
            color: white;
        }
        #footer-menu a:hover {
            text-decoration: underline; 
            color: white;
        }
    </style>
</head>
<body>
    <div id="footer-menu">
        <ul>
            <li><a href="#">List 1 Title is quite looooong</a>
                <ul>
                    <li><a href="#">List 1 Item 1</a></li>
                    <li><a href="#">List 1 Item 2</a></li>
                    <li><a href="#">List 1 Item 3</a></li>
                    <li><a href="#">List 1 Item 4</a></li>
                    <li><a href="#">List 1 Item 5</a></li>
                    <li><a href="#">List 1 Item 6</a></li>
                    <li><a href="#">List 1 Item 7</a></li>
                    <li><a href="#">List 1 Item 8</a></li>
                </ul>
            </li>
            <li><a href="#">List 2 Short title</a>
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
            <li><a href="#">List 3 Title of average length</a>
                <ul>
                    <li><a href="#">List 3 Item 1</a></li>
                    <li><a href="#">List 3 Item 2</a></li>
                    <li><a href="#">List 3 Item 3</a></li>
                </ul>
            </li>
            <li><a href="#">List 4 with no sub items</a></li>
            <li><a href="#">List 5 Should wrap under list 1</a> 
                <ul>
                    <li><a href="#">List 2 Item 1</a></li>
                    <li><a href="#">List 2 Item 2</a></li>
                    <li><a href="#">List 2 Item 3</a></li>
                    <li><a href="#">List 2 Item 4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

The items in the list come from the site map XML file via a script to generate the HTML, the list will change as pages are added to the site, so I'm looking for a solution which will not require me to manually adjust the height of the lists in order for it to format correctly.

Is it possible, using CSS, to fix the height of the entire row of lists so any wrapped list starts on the left hand side of the new row?

Upvotes: 4

Views: 2841

Answers (3)

Murtaza
Murtaza

Reputation: 3065

Check this jsFiddle

Works perfect in Firefox.

Changed 

#footer-menu li {
    margin:0 20px 5px 0;
    padding-left:6px;
    list-style-type:none;
    /*float:left;
      display:inline;
    */
    /*Added this */ 
    display:inline-table;

    background:none;
    position:relative;
    font-family:Arial;
    font-weight:bold;
    border-left:1px solid #FFFFFF;
}

Upvotes: 2

Flyingbeaver
Flyingbeaver

Reputation: 375

Check this jsFiddle

I also cleaned a little bit your code, and reduce margin to allow 4 first blocks to fit in a row.

Upvotes: 0

sandeep
sandeep

Reputation: 92793

May be you can use :nth-child for this may be that's help you. write like this:

#footer-menu > ul > li:nth-child(5){
    clear:both;
}

Check this http://jsfiddle.net/PV8Bq/1/

But nth-child is not work in IE

Upvotes: 1

Related Questions