CODEWITHSUNDEEP
htmlcsslayout
jonmo1990
jonmo1990

Reputation: 111

Unwanted margin in UL

Why is there a margin in the ul? The navbar goes directly below and out of the header when I float left or right. If I remove Ul it doesnt drop below. I dont understand it. How do I fix it?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="navbar">
               <ul>
               <li><a href="#"></a>NAV1</li>
               <li><a href="#"></a>NAV2</li>
               <li><a href="#"></a>NAV3</li>
               </ul>
           </div>
       </div>

   </div>

</body>
</html>

CSS

html{
    height:100%;
}
body{
    height:100%;
    width:100%;
    background-color: grey;
    margin:0;
    padding:0;
}
#container{
    width:80%;
    margin:auto;
}
#header{
    width:100%;
}
.navbar{
    width:100%;

}
ul{
    margin:0;
    padding:0;
    width:25%;
    float:left
}
li{
    display:inline;
}

Upvotes: 1

Views: 1425

Answers (3)

LXhelili
LXhelili

Reputation: 980

Try this way.

html{
    height:100%;
}
body{
    height:100%;
    width:100%;
    background-color: grey;
    margin:0;
    padding:0;
}
#container{
    width:80%;
    margin:auto;
}
#header{
    width:100%;
}
.navbar{
    width:100%;
    overflow: auto;
}
ul{
    margin:0;
    padding:0;
    width:100%;
    float:left;
}
li{
    display:inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="navbar">
               <ul>
               <li><a href="#"></a>NAV1</li>
               <li><a href="#"></a>NAV2</li>
               <li><a href="#"></a>NAV3</li>
               </ul>
           </div>
       </div>

   </div>

</body>
</html>

Upvotes: 0

LXhelili
LXhelili

Reputation: 980

It's not about margin,because there is no margin, there is not enough space of ul. Im not sure what do you want to achieve but u can remove width: 25%; from ul.

Upvotes: 0

Tom Harris
Tom Harris

Reputation: 243

There is no margin on the UL, it just appears that way as it is inside your container, which has margin: auto on it, which centers the #container element on your page and has 80% width.

Move your nav outside of the container if you want it to float to the left of the body, or use:

position: absolute;
left: 0;
width: 100%;

instead of floating it and it will go to the left of the nearest relative container (in this case the body as nothing is set with position: relative.

EDIT: Also, your links are not structured correctly:

<li><a href="#"></a>NAV1</li>

Should be: <li><a href="#">NAV1</a></li> if you want NAV1 to be the text of the link

Upvotes: 1

Related Questions