CODEWITHSUNDEEP
css
Ben Sinclair
Ben Sinclair

Reputation: 3986

CSS: Stopping LI's from wrapping within a UL

I have a UL list that I have converted into columns using float: left and giving each a width: 300px. I need these columns to span across the page and to make the page scroll left to right if the total columns width is longer than the page.

But at the moment, once they reach the width of the page, the next column displays underneath instead of making the page scroll left to right.

I've tried using overflow: auto and white-space: nowrap which normally works but not in this instance.

Here is my CSS:

#container {
    overflow: auto;
    white-space: nowrap;
    }
#container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    white-space: nowrap;
    }
#container ul li {
    float: left;
    width: 300px;
    margin-right: 5px;
    }

And the HTML:

<div id="container">
<ul>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
    <li>This is 300px in width</li>
</ul>
</div>

The only other option I can think of is using JavaScript to force a width on the DIV but I'd prefer not to if possible.

Upvotes: 1

Views: 55

Answers (2)

user2631523
user2631523

Reputation: 51

Yes or just define your li's as block level items. Li will naturally display inline-ish, to get them to float, you need to tell them to follow the box-model:

#container ul li {
    float: left;
    display:block;
    width: 300px;
    margin-right: 5px;
    }

And then you need a clear at the last element:

#container ul li::last{
     clear:both;
}

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

Replace float: left with display: inline-block for your LIs.

#container ul li {
    /*float: left;*/
    display: inline-block;
    width: 300px;
    margin-right: 5px;
}

Demo: http://jsfiddle.net/Eft9J/

Upvotes: 3

Related Questions