CODEWITHSUNDEEP
htmlcsswidthdimension
Ngorld
Ngorld

Reputation: 856

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

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.

Upvotes: 4

Views: 7561

Answers (3)

Jenti Dabhi
Jenti Dabhi

Reputation: 880

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(%).

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

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>

Upvotes: 1

squiroid
squiroid

Reputation: 14037

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;
}

Upvotes: 2

Related Questions