Home/ Questions/Q 9253301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:11:08+00:00

How do I make a header cover the contents and span the entire page

  • 0

How do I make a header cover the contents and span the entire page length? When I use this css 

#header {
    display: inline-block;
    background-color: #015367;
}

#login {
    color: #b92c2c;
    font-size: 1.25em;
    margin-left: 18em;
    position: relative;
    top: 16px;
    text-decoration: none;
}

#search-form {
    margin-left: 0.5em;
    margin-right: 15em;
    position: relative;
    top: 18px;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

with this html

<body>
    <div id="header">
        <div id="page-nav" class="rfloat">
            <a id="login" class="lfloat" href="/login">login</a>
            <form id="search-form" class="rfloat" action="search.py" method="get">
                <input id="searchbox" type="text" name="q" placeholder="search"/>
            </form>
        </div>
    </div>
</body>

I get this result (in firefox)
html+css result

What do I need to change to get a proper header (like stackoverflow, facebook, etc)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you used float for the elements inside #header, then you only need to add this.

    #header {
    background-color: #015367;
    overflow:hidden;
}

    Before overflow:hidden

    enter image description here

    Notice the black border, the #header isn’t wrapping the contents.

    After overflow:hidden

    enter image description here

    Check it out : http://jsfiddle.net/AliBassam/vpRc2/

    Adjust the top so that elements are positioned the way you like, position:relative; has no use here, just use floats and margins.

    • 0