Jake_the_camper Jake_the_camper - 4 months ago 10
CSS Question

How can I line my div up to the edge of my picture?

I am having trouble lining the edge of my div with a border to the edge of my picture.

Before I added the border to my second div it lined up perfectly, but now that I added it there is a gap between the edge of the div and the picture.



.headDiv {
position: relative;
width: 100%;
}
#heading {
font-family: fantasy;
font-size: 36;
position: absolute;
top: 25%;
left: 35%;
}
#navBarDiv {
height: 30px;
width: 100%;
background-color: limegreen;
margin-top: -4px;
border: 10px ridge gray;
}

<div class="headDiv">
<img id="imgBackgroud" src="http://vignette1.wikia.nocookie.net/unturned-bunker/images/4/4c/PEILEVEL.png/revision/latest?cb=20150321082112" alt="background behing heading" height="200px" width="100%" />
<h1 id="heading">Etowah Unturned Server</h1>
</div>
<div id="navBarDiv">
</div>




Answer

Add box-sizing: border-box to your bordered div. This will include any borders and padding in the width and height calculations.

#navBarDiv {
  height: 30px;
  width: 100%;
  background-color: limegreen;
  margin-top: -4px;
  border: 10px ridge gray;
  box-sizing: border-box; /* NEW */
}

Now the default box-sizing: content-box is overridden, and your borders don't expand the div.

https://css-tricks.com/box-sizing/