Cannot make give my div, width 100% - html

Question

This is the site I am working on
My Site is divided into 3 sections, Header, content and footer.
In the content div, I have different sub-div's. The last two div's, named contactsales and latestnews do not want to stretch my screens width, even though I specify the div to be width: 100%;
What could be the problem, I've checked my code over and over but cannot seem to spot my error
This is my CSS for the content div:
#content{
width: 100%;
}
#content #rowCopy{
width: 80%;
margin: 0 auto;
display: block;
}
#content #services{
width: 80%;
margin: 0 auto;
display: block;
}
#content #rowCopy #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
top: -50px;
}
#content #rowCopy #box #innercontent {
width:75%;
margin: 0 auto;
}
.col-sm-3 {
width: 22%;
min-width: 230px;
}
.col-md-4{
width: 30%;
min-width: 230px;
}
#content #services #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #contactsales {
background-color: rgb( 242, 242, 242 );
left: 0px;
width: 100%;
height: 91px;
}
#content #contactsales #inner {
width: 80%;
margin: 0 auto;
}
#content #latestnews{
background: url("../images/blurimg.jpg");
height: 574px;
width: 100%;
}
#content #latestnews #title{
color: rgba(200,200,200,0.7);
font-size: 30px;
font-style: bold;
padding-top: 50px;
padding-bottom: 50px;
}
#content #latestnews #inner{
width: 80%;
margin: 0 auto;
}
#content #latestnews #inner #box{
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #latestnews #inner #box #innercontent{
padding: 15px;
}
#content #latestnews #inner #box #innercontent h4{
font-weight: bold;
}
#content #latestnews #inner #box #news{
padding: 10px;
border: solid 1px;
border-color: rgb(220,220,220);
}
#content #latestnews #inner #box #news h5{
font-weight: bold;
}
The HTML is rather long for me to include it here
Help would be much appreciated!

Answer 1

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>
MORE ABOUT US ❱
</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>
READ MORE ❱
</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>
READ MORE ❱
</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>
READ MORE ❱
</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;"><img src="./images/contactsales.jpg"></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.

Answer 2

This is because contactsales and latestnews divs are present inside div having id="services which has width: 80%.
So either remove the two divs outside the <div id="services>, or give width: 100% to #services div i.e.
#content #services {
width: 100%;
margin: 0 auto;
display: block;
}
See the screenshot:

Answer 3

Because your last 2 divs is inside div with id = services. If you want last 2 divs is full width, you should move it out of div#services. You can move your div to footer div below it like this.

Answer 4

This is because both are taking 100% width of what their parent allocated then.
Their immediate parent is #services, and it uses 80% of the webpage width as defined by its CSS.
Change this:
#content #services {
width: 80%;
margin: 0 auto;
display: block;
}
to this:
#content #services {
margin: 0 auto;
display: block;
}
Current structure:
You have a syntax error on line 306 of your code:
<div style="clear:both"/>
change to to this: <div style="clear:both"> </div>
div tags should always have an explicit matching closing tag.
This will separate #contactsales and #newslatest from #services

Answer 5

When you are using percentage in height and width in CSS, it means that you want for example 80% of your reference width, which is the width of the parent. here you have #service as parent of #contactsales and #latestnews.
#service parent is #content. #service width is 80% of your #content and #contactsales and #latestnews are 100% of their parent.means 80% of #content too.
If you do not want to move #contactsales and #latestnews you should wrap them with someclass and change that class refrence width with position:absolute, and set position:relative to #content.Now these two Ides think of #content as their parent.
but I don't recommend position:absolute,just move them from #service
.wrapperclass{
position : absolute;
width: 100%;
left: 0;
}
#content{
position: relative;
width:100%;
left:0;
}
#content #contactsales{
width:100%;
background-color:red;
height:40px;
position:relative
}
#content #latestnews{
width:100%;
background-color:green;
position:relative;
height:40px
}
#service{
width:80%;
margin:0 auto;
background-color: yellow;
height:120px;
}
<div id="content">
<div id="service">
<div class="wrapperclass">
<div id="contactsales"></div>
<div id="latestnews"></div>
</div>
</div>
</div>