Search code examples
htmlcsspositioninline

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>	


Solution

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