CSS position relative forcing the height of element - html

Question

I have two (almost) clone elements (#container and #container-shadow). The same css rules are supposed to be applied equally to them. However, the second .box3 div element is four times the height it should be. Why is that?
codepen -> http://codepen.io/thiagoh/pen/aJwbOZ
CSS code
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
HTML code
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
current result
expected result
PS: Note the position of the boxes. That's the required position in my situation. clear:both on #container-shadow does not fix my problem.

Answer 1

You should not use the float:left on the #container, it should look like this:
#container {
position: relative;
top: -90px;
left: 400px;
}
here is an updated codepen:Codepen

Answer 2

This is because you have a float: left on your #container which is not cleared - add this after the #container:
<div style="clear:both"></div>
to clear the float - see demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div style="clear:both"></div><!-- ADDED THIS -->
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
EDIT:
If you don't want the #container-shadow to drop down, you can relatively position it and float it to left using something like this:
#container-shadow {
float: left;
left: -275px;
position: relative;
}
See demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
#container-shadow {
float: left;
left: -275px;
position: relative;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
I would suggest removing float and use inline-block for #container and #container-shadow (note that I have swapped their position in the markup) and then apply positioning to the #container to get the desired result:
#container {
position: relative;
top: -90px;
left: 50px;
display: inline-block;
}
#container-shadow {
display: inline-block;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>

Answer 3

The solution is simple.
Remove this:
float: left;

Answer 4

An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
The float: left attempts to force container-shadow to occupy this space causing distortion.
It's your same code just comment the float:
#container {
position: relative;
top: -90px;
left: 400px;
/* float: left;*/
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}