CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Fluid background centred fixed content

I'm struggling with the most efficient and correct way of doing this. Much like the design on stack overflow. I want a header where the background colour of the header extends across the whole page, but the content of the header and the content of the main body is centred and fixed.

This is the code I have so far: http://jsfiddle.net/spadez/kYfNB/13/

HTML

  <div id="container">
    <div id="header">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
    <div id="content">
         <h1>Add</h1>
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: Helvetica, Arial;
    font-size: 13px;
    text-decoration:none;
}
ul {
    list-style-type: none;
}
#header {
    background-color:#1ABC9C;
    overflow:auto;
}
#header a {
    color: white;
    padding: 15px 20px;
    background-color: #16AD8F;
    display: block;
    margin-right: 1px;
}
#header a:hover {
    background-color: black;
}
#header h1, #header ul, #header ul li {
    float:left;
}
#content {
    background-color:#EEEEEE;
}
#container {
    width: 600px;
}

Upvotes: 0

Views: 175

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21224

By adding margin: 0 auto; to an element it will sit in the center of a parent element, that can stretch across the whole page.
You would need to split the header part form the content part. And use separate container elements (i called them .inner in my example) that are centered and have the desired width.
You would put the once that stretch across the page around the inner ones ( here I used your #container element) and apply the bgcolor.

Something like this:

CSS

...
.inner {
    width: 600px;
    margin: 0 auto;
}
#container {
    width: 100%;
    background-color:#1ABC9C;
}

HTML

<div id="container">
    <div id="header" class="inner">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Item</a></li>
            <li><a href="sites.html">Item</a></li>
            <li><a href="feeds.html">Item</a></li>
        </ul>
    </div>
</div>
<div id="content" class="inner">
     <h1>Add</h1>
</div>

DEMO

Upvotes: 1

Related Questions