CODEWITHSUNDEEP
htmlcsspositioncss-float
styke
styke

Reputation: 2174

Why won't list float to the beginning of div?

My brain isn't working. Please, let yours work for mine for 1 minute.

The code is very simple. 

<ul id="nav">
            <li><a href="">Plumbing</a></li>
            <li><a href="">Flooring</a></li>
            <li><a href="">Kitchen</a></li>
            <li><a href="">Bathroom</a></li>
            <li><a href="">Re-decoration</a></li>
            <li><a href="">Structural works</a></li>
            <li><a href="">Electrical</a></li>
            <li><a href="">Re-planning</a></li>
</ul>

And some CSS styling:

#nav {margin:auto;width:960px;height:29px;background: url(../images/navbg_03.gif);box-shadow: 0px 10px  30px #cccccc;}
#nav li {position:relative;display:block;float:left;}

So simple, but it boggles my mind as to why when I float it, it leaves a gap before the beginning of the element.

Upvotes: 0

Views: 67

Answers (3)

user1466310
user1466310

Reputation: 25

hey the margin should be made 0px as well as the padding the css code should look like this

#nav {margin:0px;width:960px;height:29px;background: url(../images/navbg_03.gif);box-shadow: 0px 10px  30px #cccccc;}
#nav li {position:relative;display:block;float:left;}

Upvotes: 0

Nick Veys
Nick Veys

Reputation: 23939

A crutch I always fall back on is throwing borders on everything. Doing this shows there is some padding shoving things over: http://jsfiddle.net/gQMvT/5

* { border: 1px solid black; }

Upvotes: 2

Musa
Musa

Reputation: 97672

uls usually have padding or margin in the user agent styles, just add

#nav{
    padding:0;
    margin:0;
}

Upvotes: 2

Related Questions