CODEWITHSUNDEEP
csscss-floatfloating
Doga Genc
Doga Genc

Reputation: 75

Floating left all elements in a row inside floated right parent

Here's my issue: http://jsfiddle.net/4f4Laskz/2/

I just want to make all list items as inside a row. But the last element doesn't stay at the right and goes downside of row. Why it happens?

HTML:

<a href="#index" class="logo">
    <h1><span class="medikal">Some text</span></h1>
    <span class="saglik">Some text</span>
</a>
<nav>
    <ul>
        <li class="selected"><a href="#hakkimizda">Some text</a></li>
        <li><a href="#urunler">Some text</a></li>
        <li><a href="#markalar">Some text</a></li>                                  
        <li><a href="#iletisim">Some text</a></li>
    </ul>
</nav>

CSS: 

.logo {
    margin: 0.5em 0;
    float: left;
    line-height: 0.2em;
}

nav {
    margin: 0.7em 0;
    float: right;
    font-size: 16px;
}

nav li {
    margin: 0 10px;
    float: left;
    padding: 1%;
    border-radius: 5px;     
}

Upvotes: 1

Views: 416

Answers (1)

Christian
Christian

Reputation: 19740

Floated elements without widths are highly unpredictable and should be avoided if at all possible.

A floated element is generally as wide as its children. Using percentages for children inside floated elements confuses the renderer.

Think about it: a percentage padding on the children requires the renderer to know the width of the parent. But the width of the floated parent is based off the sum width of all its children (including their padding). So this type of calculation is complicated chicken-or-egg scenario, and it appears that the renderer just gives up and does something weird instead.

Try using non-percentage values instead:

nav li {
    margin: 0 10px;
    float: left;
    padding: 6px;
    border-radius: 5px;     
}

Upvotes: 1

Related Questions