CODEWITHSUNDEEP
htmlcss
Mikey
Mikey

Reputation: 396

Inline Block Elements Overflowing Parent Container

I have a list of 4 menu items sitting side by side using display:inline-block;. Each item is 120px, therefore I should be able to set the parent container to be 480px wide, however this sends the last item into the next row, why is this ??

Here is a jsfiddle :http://jsfiddle.net/htdgdhxn/

My html:

<section id="nav">

    <div id="nav-wrapper">

        <ul id="nav-list">
            <li id="nav-home"><a href="index.php">Home</a>
            </li>
            <li id="nav-clothes"><a class="category All">Clothes</a>
            </li>
            <li id="nav-about"><a href="aboutus.php">About Us</a>
            </li>
            <li id="nav-contact"><a href="contactus.php">Contact Us</a>
            </li>                                                                           
        </ul>           

    </div>

</section>

CSS:

* { margin: 0px; padding: 0px; }
#nav { background-color: #fff; }
#nav-wrapper { text-align: center; height: 74px; }
#nav-list { height: 100%; width: 480px; }
#nav-list li { display: inline-block; vertical-align: top; width: 120px; height: 100%; }
#nav-list li a { text-decoration: none; color: #000; font-size: 1.6em; display: block; height: 100%; line-height: 74px; }
#nav-list li a:hover { background-color: #F0ECE1; cursor: pointer; }

I have tested and this happens in Chrome, IE and Firefox.

Upvotes: 1

Views: 1732

Answers (4)

Asish Das
Asish Das

Reputation: 39

Reason:- 1. The font size of the text in the li element might be causing the problem. You can modify it by reducing the font-size.

#nav-list li a { text-decoration: none; color: #000; font-size: 1.2em; display: block; height: 100%;line-height: 74px; }

  1. Instead of using this

     #nav-list li { display: inline-block; }

You can do like this:-

     #nav-list li { display: inline; font-weight:bold;}

Please let me know if this helps.

Upvotes: 0

Anuj
Anuj

Reputation: 1526

Just increase the width of your container to 500px

#nav-list { height: 100%; width: 500px; }

or remove the white spaces between consecutive li tags

or

apply display:initial in #nav-list { height: 100%; width: 480px;}

i.e #nav-list { height: 100%; width: 480px; display: initial;}

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

The inline-block value is incredibly useful when wanting to control margin and padding on "inline" elements without the need to block and float them.One problem that arrises
when you use inline-block is that whitespace in HTML becomes visual space on screen.
Gross.There are a few ways to remove that space; some of them are just as gross, one is reasonably nicer.

Solution 0: No Space Between Elements: The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

Solution 1: font-size: 0 on Parent The best white-space solution is to set a font-size of 0 on the parent to the inline block elements.

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

Solution 2: HTML Comments This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

It might help you.

Upvotes: 1

anpsmn
anpsmn

Reputation: 7257

Remove the whitespace between each <li>

<li></li> <...space here...> <li></li>

Inline block elements create a gap between li elements.

<ul id="nav-list">
   <li id="nav-home"><a href="index.php">Home</a>
   </li><li id="nav-clothes"><a class="category All">Clothes</a>
   </li><li id="nav-about"><a href="aboutus.php">About Us</a>
   </li><li id="nav-contact"><a href="contactus.php">Contact Us</a>
   </li>                                                                            
</ul>

See fiddle

Upvotes: 2

Related Questions