Home/ Questions/Q 6718461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:58:19+00:00

I have the following page: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Title</title> <link rel=stylesheet

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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..

    • 0