CODEWITHSUNDEEP
htmlcss
user1117313
user1117313

Reputation: 1985

html header layout

I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:

HTML:

<body>
<div class="header">
    <div class="wrap">Header</div>
</div>

<div class="content">
    content
</div>

</body>

CSS:

.header{
    background:yellow;
}

.wrap, .content{
    border:1px solid red;
    margin:0 auto;
    width:500px;
}

I've used .wrap inside the .header so that the content in the header also has same width as the .content.

Problem: The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.

JSFiddle: Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.

Upvotes: 0

Views: 275

Answers (1)

Eric Witchin
Eric Witchin

Reputation: 574

Set a min width on the header

.header{
    background:yellow;
    min-width: 500px;
}

Upvotes: 3

Related Questions