I am facing an issue with my layout. I have two child divs within a parent div, each set to 50% width and displayed inline. To style the parent div, I am using the :after pseudo-element to draw a horizontal rule (
) with 15px top and bottom margins.
The problem arises when the
does not extend under the parent div unless I float one of the child divs either left or right. If I float both child divs, the
appears misplaced in the middle of the parent div.
Currently, I have floated the left child div to the left, which seems to resolve the issue. However, I am unsure if I should float both child divs or if it is acceptable to have only one floated.
UPDATE:
Upon reviewing the fiddle link, it is evident that the
is not positioned correctly under the parent .double div.
.single,
.double {
float:left;
width:100%
}
.single:after,
.double:after {
Content:"";
margin:15px 0;
background-color:#FFFFFF;
border-bottom:1px solid #E2E2E2;
box-sizing:content-box;
display:block;
height:1px;
}
.double .small-left {
width:49%;
float:left;
display:inline-block;
padding-right:15px;
border-right:1px solid #E2E2E2;
vertical-align:top;
}
.double .small-right {
width:42%;
float:right;
border:none;
display:inline-block;
padding-left:15px;
vertical-align:top;
}
<div class="double">
<div class="small-left">Test</div>
<div class="small-right">Test</div>
</div>