CODEWITHSUNDEEP
htmlcss
VansFannel
VansFannel

Reputation: 45921

Why header is bigger than 870px?

I have the following page:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="page">
        <div id="header">
            <ul id="menu">
                <li class="products">
                    <a href="products.html">Products</a>
                </li>
                <li class="resume">
                    <a href="resume.html">My resume</a>
                </li>
                <li class="blog">
                    <a href="blog.html">Blog</a>
                </li>
                <li class="about">
                    <a href="about.html">About</a>
                </li>
            </ul>
        </div>
        <div id="main">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

</html>

Index.css:

#page {
    width: 1024px;
    height: 900px;
    margin:0 auto;
}

#header {
    width:870px;
}

#menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

#menu li {
    float: left;
}

#main {

}

#footer {
    width:870px:
}

Common.css:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    text-decoration:none;
}

Testing it with Firebug, I see #header is 870px, but #menu is bigger that #header.

I have disabled margin and padding from menu style, with the same result.

Why #menu is bigger that 870px?

I want that border lines have 870px length.

Upvotes: 1

Views: 200

Answers (5)

Jean-Charles
Jean-Charles

Reputation: 1720

#menu is Not bigger that 870px, it is equal as demanded.

ul has a padding.

Add padding-left: 0; to your #menu CSS or reduce the #menu width.

Upvotes: 1

Jim
Jim

Reputation: 73936

The width you set is like an item in a box. You have the width of the content (which corresponds to the width you set), then the padding, then the border (the box), then the margin. In the above code, you've set padding and a border, both of which will add to the visible size of the element.

Upvotes: 1

nheinrich
nheinrich

Reputation: 1841

Because it has padding. The padding will add an additional 34px to your width. If you want the menu to be 870px you'd have to change the width to 836px.

If you alter #menu to these properties, you'll have what you want.

#menu {
  border-bottom: 1px solid #EEEEEE;
  border-top: 1px solid #EEEEEE;
  clear: both;
  list-style-type: none;
  margin: 20px 0;
  overflow: hidden;
  padding: 11px 0 11px 34px;
  width: 836px;

}

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Because #menu which is contained inside it has

  1. width of 870 pixels
  2. padding-left of 34 pixels

this adds to 870 + 34 = 904 pixels.

setting width of the #menu element to 870 - 34 = 836 pixels (width:836px;) will make it fit exactly..

Upvotes: 2

rickyduck
rickyduck

Reputation: 4084

#menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

is 36px bigger than 870px. Set width to 834px in #menu

Upvotes: 1

Related Questions