becky becky - 5 months ago 18
CSS Question

How to get my div to be 100% of browser?

I have created a div in html with an image and come text, I added 100% to the width of the div in the css and I also added a background colour but for some reason the div is not 100% of the browser and I can't see what I am doing wrong.



#container {
padding: 0;
margin: 0;
}
#pic {
padding-left: 450px;
padding-top: 40px;
position: absolute;
}
#about {
background-image: url(background.jpg);
padding-left: 50px;
padding-top: 150px;
padding-bottom: 20px;
text-align: center;
padding-right: 100px;
line-height: 2.5;
width: 100%;
}

<div id="container">

<div id="pic">

<img class="errorimage" src="IMG_4847.png" alt="" title="">

</div>

<div id="about">


<h1 class="name">Rebekah</h1>


<h2 class="name2">Web Desgin. Google Adwords. Google Analytics.</h2>


</div>




Answer

The reason it's not 100% is because the div is running into the padding of the #about div. If you remove the left and right padding it should fix the problem.

html, body {
  margin: 0;
  padding: 0;
}    

#about {
  background-image: url(background.jpg);
  padding-top: 150px;
  padding-bottom: 20px;
  text-align: center;
  line-height: 2.5;
  width: 100%;
}

Here is a fiddle