Home/ Questions/Q 7405277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T05:22:47+00:00

I want to have a full header, while a fixed width of the content

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set a min width on the header

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