HTMLHelp Forums > Background color not filling all the way?

Zulaika

Jul 5 2012, 12:42 PM

Why won't the header fill in all the way?

CODE

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">

    <div id="header">
        <p><span id="header-title">Header</span></p>
        <p><span id="header-description">Description</span></p>
    </div>

    <div id="navigation">
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </div>

    <div id="content">

        <div id="post">
            <span id="post-title">Post Title 1</span>
            <p>This is a sample <a href="#">link</a>.</p>
            <link rel="alternate" type="application/rss+xml" title="RSS" href="http://elgg.org/pg/thewire/?view=rss" />
        </div>

        <div id="sidebar">
            <div id="secondary" class="widget-area" role="complementary">
                <h3>Search</h3>
                <form method="get" action="http://www.google.com/search">
            <div>
            <table border="0" cellpadding="0">
                <tr>
                <td>
                    <input type="text" name="q" size="25" maxlength="255" value="" />
                    <input type="submit" value="Search" />
                </td>
                </tr>
                <tr>
                <td style="font-size:75%">
                    <input type="checkbox"  name="sitesearch" value="prosalamander.com" checked /> only search PRO SALAMANDERRR!
                </td>
                </tr>
            </table>
            </div>
            </form>
            </div>

    </div>

        <div id="footer">
            <p>All right reserved.</p>
        </div>
    </div>

</div>

</body>
</html>

CODE

a:link {
    color:#ff0000;
}
a:visited {
    color:#ff0000;
}
a:hover {
    color:#dd0000;
}
a:active {
    color:#dd0000;
}

body {
    font-family:arial,sans-serif;
    background:#333;
}

#container {
    background: #fff;
    border: solid #000 1px;
    margin-left: 25%;
    margin-right: 25%;
}

#header {
    text-align: center;
    background: #333;
}

#header-title {
    font-size: 26px;
    font-weight: bold;
}

#header-description {
}

#navigation {
    background: #ff0000;
    display: block;
    float: left;
    margin: 0 auto 1em;
    width: 100%;
    border-top: solid #000 1px;
        border-bottom: solid #000 1px;
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
#navigation li {
    float: left;
    position: relative;
}
#navigation a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    text-decoration: none;
    color:#fff;
    border-right: solid #000 1px;
}
#navigation li:hover > a {
    background: #dd0000;
}
#navigation ul ul a:hover {
    background: #dd0000;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation li:active > a {
    background: #dd0000;
}

#content {
    padding-left: 5px;
    padding-right: 5px;
}

#post {
    float: left;
    width: 75%;
    clear:both;
}

#post-title {
    font-weight: bold;
    font-size: 20;
}

#sidebar {
    margin: -17px 0 0;
    float: right;
    width: 25%;
}

#footer {
    clear:both;
    text-align: center;
}

pandy

Jul 5 2012, 02:00 PM

It's related to your other problem. P also has default margins, top and/or bottom and size varies with browser. Most block level elements except DIV are given some kind of margin by browsers or the text would run together.

Zulaika

Jul 5 2012, 02:34 PM

QUOTE(pandy @ Jul 5 2012, 03:00 PM)

It's related to your other problem. P also has default margins, top and/or bottom and size varies with browser. Most block level elements except DIV are given some kind of margin by browsers or the text would run together.

Oh wow, thank you. This is definitely an eye opener.