Becky Becky - 4 years ago 52
HTML Question

Content displaying issues

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>




Answer Source

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%).

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