degebine degebine - 1 year ago 106
CSS Question

HTML/CSS - position asolute within block with border 100% width

I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be

2px
too small.

What is the best way to go about fixing this?

Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with
border-box
the child div is smaller and thus doesn't align.

html

<div class="container">
<div class="diagonal"></div>
</div>


css

* {
box-sizing: border-box;
}
body {
background-color:red;
}

.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}

.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}


JSFiddle

Answer Source

I think you're looking for this:

* {
  box-sizing: border-box;
}

This property tells the browser to account for any border and padding in the value you specify for width and height

EDIT :

If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border. I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;

body {
  background-color: red;
}

.container {
  width: 1170px;
  margin: 0 auto;
  margin-top: 200px;
  height: 700px;
  position: relative;
  z-index: 3;
  background-color: white;
  border-style: solid;
  border-color: transparent black black black;
  border-width: 0 3px 3px 3px;
}

.diagonal {
  width: 100%;
  height: 400px;
  transform: skewY(-10deg);
  position: absolute;
  top: -200px;
  left: -3px;
  background-color: white;
  border-style: solid;
  border-color: transparent blue;
  border-width: 0 3px;
  z-index: -1;
}
<div class="container">
  <div class="diagonal"></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download