Why width: 100% is not assuming the full window width size?

Question

I have HTML code and CSS below:

body{
 background-color: #C7C7C7;
}
#content{
 background-color: #FFF;
 text-align: center;
}
.warp{
 padding:15px;
 display: inline-block;
 width: 700px;
 background-color: red;
}
#header{
 width: 100%;
 background-color: #000;
 color: #FFF;
}

<body>
<div id="header">
 HEADER IS HERE
</div>
<div id="content">
 <div class="warp">
  CONTENT IS HERE
 </div>
</div>
</body>

But when I resize my browser, a header div not width: 100%

You can see that in this image: enter image description here

How to fix it?

Thanks you so much.

can you define what you need ? i don't understand your question. — Ravi Sukhadia, Jan 09 '15 at 05:38
I want header width :100% but it's not working. You can see in picture. div#Warp > div#Header — Ngorld, Jan 09 '15 at 05:42

score 2 · Answer 1 · answered Jan 09 '15 at 05:45

2

Hey there is no problem with your header. Problem is reside in your

.warp{
    padding:15px;
    display: inline-block;
    width: 700px;<-- because of fixed width content go outside the body tag
    background-color: red;
}

answered Jan 09 '15 at 05:45

squiroid

13,809
6
47
67

Bhojendra Rauniyar · Accepted Answer · 2015-01-09T05:48:30.087

It is because when you resize the browser there's a fixed width div i.e. .wrap div to 700px and if you resize the browser the window width is upto 700px but 100% width is applied to the view-port width.

So, how you can do is to apply max-width to the .wrap div:

.warp{
    padding:15px;
    display: inline-block;
    width: 700px;
    max-width: 100%;
    box-sizing: border-box;/*for padding values*/
    background-color: red;
}

So, in smaller window .wrap div won't go beyond the 100% view-port width and your header would be in corresponding with that and in larger window the .wrap div won't go beyond the 700px as what you want.

Here's the demo:

body{
 background-color: #C7C7C7;
}
#content{
 background-color: #FFF;
 text-align: center;
}
.warp{
 padding:15px;
 display: inline-block;
 width: 700px;
    max-width: 100%;
    box-sizing: border-box;
 background-color: red;
}
#header{
 width: 100%;
 background-color: #000;
 color: #FFF;
}

<body>
<div id="header">
 HEADER IS HERE
</div>
<div id="content">
 <div class="warp">
  CONTENT IS HERE
 </div>
</div>
</body>

I was add max-width: 100%; but it still not working ? – Ngorld Jan 09 '15 at 05:44 — Ngorld, Jan 09 '15 at 05:44

score 0 · Answer 3 · edited Jan 09 '15 at 06:15

0

Because .warp{} this div you give width: 700px fix. So you can use media screen and give .warp{} div width: 100%. Or give .warp{} div width on percentage(%).

edited Jan 09 '15 at 06:15

CRABOLO

8,605
39
41
68

answered Jan 09 '15 at 05:48

Jenti Dabhi

870
5
11

Why width: 100% is not assuming the full window width size?

3 Answers3