CODEWITHSUNDEEP
css
MEM
MEM

Reputation: 31407

Why does float "adds" a new line to the element?

The point is to have a single line on this menu, wrapped. Instead, we are getting "two lines" and I'm not getting why is he dropping the line.

Can anyone please drop me a quick look about how is this happening ?

The HTML

<div id="main-menu">
<ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
</ul>
</div>

CSS

#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 75px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
}

#main-menu ul li {
    display:inline-block;
    padding: 2px 2%;
}

#main-menu ul li a {
    color: #fff;
    font-size: .9em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

Here an example:

http://jsfiddle.net/XRm6Q/2/

Upvotes: 0

Views: 151

Answers (4)

Kyle
Kyle

Reputation: 67244

It's because the parent element (ul) is simply not wide enough to accommodate your lis.

Make the UL wider and it will work.

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/8/

Add width: 100%; to the parent DIV, not the UL. Sorry :D

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/16/

Upvotes: 1

Chris
Chris

Reputation: 26918

This isn't caused by the float, it's because of the padding you're applying to your lis (because when you have percentage paddings, the parent doesn't resize-to-fit). If you change your padding: 2px 2%; to padding: 2px; the wrapping will be gone: little link.

Hope that helped!

Upvotes: 2

Jon Hanna
Jon Hanna

Reputation: 113392

Either set a width on the menu, or use table-row display for it, and table-cell for the items. In the latter case you'll probably what white-space: nowrap on the items too, but it has advantages if you don't know what the width will be.

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123438

See http://jsfiddle.net/XRm6Q/10/

I used white-space: nowrap; on ul element and white space: normal on li elements. In this way you don't need to adjust the parent width (then just remove/adjust the extra padding on li elements or use a margin instead)

Doing so, all the items will stay in the same row

Upvotes: 1

Related Questions