CODEWITHSUNDEEP
htmlcss
user3385997
user3385997

Reputation: 67

HTML & CSS: My UL extends out of container

I'm having issues with my UL. I set its width:100%, but it looks like to extend outside the container.

Here's the link to the picture:
http://s10.postimg.org/kp3i5v4mh/websiteuloutofcontainer.png

Here's my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Official Website of Andrew</title>
   <link rel="stylesheet" type="text/css" href="mainstyle.css" />
<head>
<body>

<div id="container">

<header>
<img id="andrewvuheader" src="images/andrewheader.png" alt="andrewvuheader" />

<div id="break"></div>

<ul>
   <li><a href="#" target="_blank">HOME</a></li>
   <li><a href="#" target="_blank">ABOUT</a></li>
   <li><a href="#" target="_blank">PROJECTS</a></li>
   <li><a href="#" target="_blank">COLLABORATE</a></li>
   <li><a href="#" target="_blank">CONTACT</a></li>
</ul>
</header>


</div> <!-- container DIV -->

</body>
</html>

Here's my CSS:

html, body  {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
}

/***************************
******* CONTAINER **********
***************************/

#container  {
    margin: 0 auto;
    height: 500px;
    border: 2px solid red;
    width: 1080px;
    max-width: 90%;
}

/***************************
********** HEADER **********
***************************/

header  {
    margin: 0;
    padding: 0;
    border: 2px solid green;
    background-color: #000000;
    width: 99.6%;
    height: 139px;
}

/* Andrew Vu Header */
img #anderwvuheader  {
    border: 2px solid yellow;
    padding: 10px;
    float: left;
    position: relative;
    margin-left: 20px;
}

/* Clears all float properties */
#break  {
    clear: both;
}

/***** Menu *****/
header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 20px 35px 20px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    margin-left: -1.8px;
    min-width: 500px;
}

/***** Listed Items *****/
header ul li {
    background-color: #000000;
    font-weight: bold;
    font-size: 0.8em;
    font-family: Verdana, Helvetica, Arial, Sans-serif;
    float: left;
    display: inline;
    border-right: 2px solid red;
    padding: 10px 10px;
    margin-top: -15px;
}

header ul li a  {
    text-decoration: none;
}

/* Normal, unvisited link */
header ul li a:link  {
    color: #FFFFFF;
}

/* Visited link */
header ul li a:visited {
    color: #FFFFFF;
}

/* Mouse over link */
header ul li a:hover {
    color: yellow;
}

/* Selected link */
header ul li a:active {
    color: #FFFFFF;
}

Upvotes: 1

Views: 1043

Answers (3)

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

The reason this is happening is because you have right/left padding applied to your UL. Using both padding and width:100%;will cause the length of the element to be 100% + rigt/left paddingin width.

What you can do is add box-sizing to your UL element. When you use box-sizing, your padding/borders etc will not change the width of your element but will instead be applied within it.

header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 20px 35px 20px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    min-width: 500px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

FIDDLE

Upvotes: 0

Alex
Alex

Reputation: 1183

I think that's happening because of padding property set up for your ul and li elements. Keep in mind that padding will increase size of block independently of which width or height you'd set.

You can remove width property from ul styles and check it out.

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

You have to remove the padding-left and padding-right from the ul. Or as in your example set the padding of the ul to: 20px 0px 35px 0px=> top-right-down-left padding;

Also, remove the margin-left: -1.8px;.

CSS:

header ul  {
    width: 100%;
    margin: 0;
    padding: 20px 0px 35px 0px;
    list-style-type: none;
    background-color: #000000;
    margin-top: -5px;
    position: relative;
    min-width: 500px;
}

Example here.

Upvotes: 0

Related Questions