100% DIV width is not really 100%
The 100% value is 100% of the parent's width or the view port. See the documentation.
Why is width: 100% not working here?
It's because your footer is inside a <section> tag which has width:75% and padding:40px.
Instead, do this:
<footer id="footer">
<!-- code -->
</footer>
JSFiddle
Make sure to remove the <section> tag from around the <footer> tag.
The reason is doesn't work is because you've done 100% of it's parent element which is section. So it's 100% of 75%.
Why div 100% width doesn't work as expected
By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.
EDIT: added code
*EDIT: updated code*
<html>
<head>
<style>
#bar{
width: 100%;
position: relative;
}
#progress{
background-color: #0a0;
width: 20%;
position: absolute;
z-index: 0;
}
#progress_text{
text-align: center;
width: 100%;
position: relative;
z-index:1;
}
.progress_cell{
}
</style>
</head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td class="progress_cell">
<div id="bar">
<!-- This is meant to be a progress bar -->
<div id="progress">
</div>
<div id="progress_text">
Text Here! Text Here! But it's really long, and it's going to overflow ...
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Cannot make give my div, width 100%
Replace your div#content to the code below.
<div id="content">
<div id="slider">
<div id="slider1_container" style="position: relative; margin: 0px auto; top: -7px; left: 0px; width: 1350px; height: 633.461538461539px; overflow: hidden;" jssor-slider="true">
<!-- Slides Container -->
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<!-- bullet navigator container -->
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<!-- Arrow Left -->
<!-- Arrow Right -->
<!--#endregion Arrow Navigator Skin End -->
<div style="position: absolute; top: 0px; left: 0px; width: 1300px; height: 610px; transform-origin: 0px 0px 0px; transform: scale(1.03846153846154);"><div class="" style="position: relative; margin: 0px auto; top: 0px; left: 0px; width: 1300px; height: 610px; overflow: visible; display: block;"><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;"><div debug-id="slide_container" style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;" debug-id="slide-board"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
<div debug-id="slide-0" style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-1" style="width: 1300px; height: 610px; top: 0px; left: 1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-2" style="width: 1300px; height: 610px; top: 0px; left: -1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
</div><style>
/* jssor slider bullet navigator skin 21 css */
/*
.jssorb21 div (normal)
.jssorb21 div:hover (normal mouseover)
.jssorb21 .av (active)
.jssorb21 .av:hover (active mouseover)
.jssorb21 .dn (mousedown)
*/
.jssorb21 {
position: absolute;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
position: absolute;
/* size of bullet elment */
width: 19px;
height: 19px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
background: url(./images/bullets.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
</style><div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px; width: 73px; height: 19px; left: 613.5px;">
<!-- bullet navigator item prototype -->
<div u="prototype" class="av" style="position: absolute; left: 0px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 27px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 54px; top: 0px;"></div></div><style>
/* jssor slider arrow navigator skin 21 css */
/*
.jssora21l (normal)
.jssora21r (normal)
.jssora21l:hover (normal mouseover)
.jssora21r:hover (normal mouseover)
.jssora21l.jssora21ldn (mousedown)
.jssora21r.jssora21rdn (mousedown)
*/
.jssora21l, .jssora21r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url(./images/arrows.png) center center no-repeat;
overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }
</style><span u="arrowleft" class="jssora21l" style="top: 277.5px; left: 8px; display: none;">
</span><span u="arrowright" class="jssora21r" style="top: 277.5px; right: 8px; display: none;">
</span><a style="display: none" href="http://www.jssor.com">Image Slider</a></div></div></div>
</div>
<div id="rowCopy">
<div class="col-xs-5 col-sm-3" id="box">
<div id="innercontent">
<h3>WELCOME TO FORTREX</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">MORE ABOUT US ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/datamanagement.jpg">
<div id="innercontent">
<h3>DATA MANAGEMENT</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/storageservices.jpg">
<div id="innercontent">
<h3>STORAGE SERVICES</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/aviationstorage.jpg">
<div id="innercontent">
<h3>AVIATION STORAGE</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
<a href="#">READ MORE ❱</a>
</p></div>
</div>
</div>
<div style="clear:both"></div>
<div id="services">
<div class="col-md-4" style="padding: 0;"><h1>OUR SERVICES</h1></div>
<div class="col-md-8" style="padding: 0; padding-top: 20px;"><hr></div>
<div style="clear:both"></div>
<div class="col-md-4" id="box">
<div id="inner">
<div class="col-md-4"><h5 style="font-weight: bold;">PACKAGING AND STORAGE</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/packaging.jpg"></div>
</div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/trans.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WORLDWIDE TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/globtrans.jpg"></div>
</div>
<div style="clear:both">
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WAREHOUSING</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/warehousing.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">DOOR-TO-DOOR DELIVERY</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/delivery.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">GROUND TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/groundtrans.jpg"></div>
</div>
</div>
<div style="clear:both; padding:20px;"></div>
</div>
<div id="contactsales">
<div id="inner">
<div class="col-md-8" style="top: 35px; font-size: 20px;">Not Sure which Solution fits your buiness needs?</div>
<div class="col-md-4" style="top: 20px;"><a href="#"><img src="./images/contactsales.jpg"></a></div>
</div>
</div>
<div id="latestnews">
<div id="inner">
<div id="title">
LATEST NEWS
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example1.jpg">
<div id="innercontent">
<h4>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example2.jpg">
<div id="innercontent">
<h4>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<div id="news">
<h5>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news" style="background: rgb(240,240,240)">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
What I did is that I move the #contactsales and #latestnews out of the #services and put next to the #services.
css 100% width div not taking up full width of parent
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
Div not 100% width of browser
It's likely the page's margin and/or padding.
Add:
html, body {
padding: 0;
margin: 0;
}
.header {
margin: 0;
}
html,
body {
padding: 0;
margin: 0;
}
.header {
margin: 0;
position: relative;
background-color: #088ed7;
width: auto;
height: 20px;
}<div class="header">...</div>Div Width 100% not working when resizing of browser
I figured it out! I set width: 100% to min-width: 100% and that fixes the issues.
why doesn't height: 100% and width: 100% work?
To get vertical alignment you have to have a second div inside the first 100% sized one.
Approx centering (fine for small amounts of text) is easy: http://jsfiddle.net/ngVSd/4
If you want proper centering you have to set the height and width of the central div explicitly then give it negative margins of 1/2 the width and height. You also have to remove the padding and margin from body.
Note that to vertically center the text in the inner div you also need to set its line-height to be the same as its height: http://jsfiddle.net/ngVSd/6/
html, body { height: 100%; margin: 0; padding: 0;}
#outerDiv { height: 100%; width: 100%; background-color: red; text-align: center; }
#wordDiv { position: absolute; background-color: lightblue; top: 50%; left: 50%; width: 100px; height: 100px; line-height: 100px; margin: -50px -50px;}<div id="outerDiv"> <div id="wordDiv">Word</div></div>Related Topics
HTML5 Vs HTML4 - H1 Tag Rendered with Extra Space - How to Remove
Performance of Jquery Selectors Vs CSS3 Selectors
Canvas Distorts Drawing. How to Get The Scale Factor Between The Set Size and The Styled Size
Very Different Font Sizes Across Browsers
Timing Within a CSS Image Slider
Can Not Scroll <Body> While Fullscreen Is Enabled in Ms Ie11
Svg Pattern and Gradient Together
Background with Radius-Top Inside
Flexboxes Overlapping Instead of Pushing Aside
How to Seamlessly Align Block Divs of Different Sizes
What Is Meant by "Participate" in The Definition of "Normal Flow" in The CSS 2.1 Spec
Email Clients Ignoring Internal Style Sheet
What Version of Foundation Is Used in Cakephp3
CSS: Show Style on Hover Over Multiple Divs Placed One Over Another