I am having an issue aligning two different elements to where they are parallel horizontally. I am wanting the second grid right_service_wrap
to appear on the right side of the page just like the left_service_wrap
. I am not sure what I am doing wrong that the float right is appearing below the left_service_wrap
.
Anyone have any ideas??
.left_service_wrap {
}
.right_service_wrap {
float: right;
display: inline;
}
.title_left {
margin-left: 20%;
}
.title_right {
}
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
<div class="left_service_wrap">
<div class="title_left">A LIST OF OUR SERVICES</div>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Flooring</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofing</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
</div>
<div class="right_service_wrap">
<div class="title_right">A LIST OF OUR SERVICES</div>
</div>
Set the width of both to 50% and do:
.left_service_wrap {
float:left;
width:50%;
}
.right_service_wrap {
float: left;
width:50%;
}
Working demo here: https://jsfiddle.net/usrce45v/
Consider that your requirement of an extra left margin to be applied to the left container requires you to rearrange the width of both left and right containers. So, for a left-margin
of 20% the equation becomes:
whole parent width (100%) minus margin (20%), half the result (40%).