CODEWITHSUNDEEP
htmlcssmenuheadernavigation
Moritz Friedrich
Moritz Friedrich

Reputation: 1481

Combined width of child elements of an ul equals more than their sum

Answered

I begin to think I am losing my mind... Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width. But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset. Code is as follows:

HTML

    <div id="header-wrapper">
        <div id="header">
                <ul id="head-menu">
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                    <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a></li>
                </ul>
        </div>
    </div>

CSS

#header-wrapper         { width: 100%; height: 56px; position: relative }
#header                 { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu              { width: calc(5*200px); margin: 0 auto;}
.head-menu-item         { display: inline-block }
.head-menu-item-link    { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }

Update 29.09.13

If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:

</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
</li><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>

That has done it easily, without altering the code too much and keeps it clean.

Upvotes: 2

Views: 645

Answers (4)

nathan
nathan

Reputation: 149

I don't have enough 'reputation' to comment, but I would like to restate something Vinícius Moraes said, WHITE SPACES in you code ie...

<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>

as seen here by putting on different lines (creating a coded white space) can make a a dramatic effect, where putting...

<div id="foo"></div><div id="bar"></div><div id="thing"></div>

can create the desired effect, as I found after spending several hours wondering why my three 's where next lining when positioned perfectly with a jquery resize. Thank you again Vinícius Moraes for pointing out this rookie mistake.

Upvotes: 0

gaurav5430
gaurav5430

Reputation: 13892

or else if you just want your html to look neat, you can add a negative margin to the display:inline-block elements (to account for the gaps between them in html code), but it would work only if you have a kinda fixed layout, which rarely changes, and you are too adamant to mess up your code by removing spaces or adding comments

Upvotes: 0

Vin&#237;cius Moraes
Vin&#237;cius Moraes

Reputation: 3516

The problem is inline elements add a extra space between each other because of the empty space on your html ( even a simple line-break ) here is your fix jsfiddle

HTML

<div id="header-wrapper">
    <div id="header">
        <ul id="head-menu">
            <li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li><!--
            --><li class="head-menu-item"><a href="" class="head-menu-item-link">Navlink</a>
            </li>
        </ul>
    </div> </div>

Upvotes: 2

andi
andi

Reputation: 6522

display:inline-block is inserting spaces in between the li's (that is, displaying the white space shown in the HTML). You can see this more clearly if you put a background color on the li's.

Upvotes: 0

Related Questions