Clever Geek Handbook

Why width: 100% doesn't work

I have the HTML 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>
Run code


But when I resize my browser the div header is not width: 100%

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

How to fix it?

Thank you very much.

+3


source to share


3 answers


This is because when the browser is resized, there is a fixed width of the div ie .wrap

div to 700px, and when the browser is resized, the window width is up to 700px and the window width is 100%.

So how you can do this is to apply the max width to the div .wrap

:

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

So, in a smaller window the .wrap

div will not go beyond the 100% viewport width and your title will match that, while in a larger window the div .wrap

will not go beyond 700px as you want.



Here's a 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>
Run code


+1


source


Hey, you have no problem with your title. The problem is your



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


source


Because .warp{}

this div you are giving width: 700px

fix. This way you can use the media screen and give a .warp{}

div width: 100%

. Or give the .warp{}

div width as a percentage (%).

0


source






More articles:


All Articles