KingGofG KingGofG - 7 months ago 9
HTML Question

2 sections or divs displayed next to each other

I have two sections and need them displayed side-by-side but it doesn't seem to work. - http://premiumhosting.co/ella_dev/waxing.html

Could anyone give me any pointers please as to how i can have the two sections displayed side by side

HTML:

<div class="space80"></div>

<!-- CONTENT -->
<section class="main_content">
<div class="container">
<div class="row">
<div class="td-col-6">

<!-- SERVICE PACK FEMALE LEFT-->
<div class="td_service_pack">
<footer class="td_pack_footer">
<div class="td_pack_footer_in">
<div class="td_pack_title">
<h3>Female Waxing</h3>
</div>
<div class="td_pack_content">
<ul class="td_pack_includes">
<li><span>Eyebrow <span>$20.00</span></span></li>
<li><span>Upper Lip<span>$10.00</span></span></li>
<li><span>Chin<span>$15.00</span></span></li>
<li><span>Underarm<span>$15.00</span></span></li>
<li><span>Stomach<span>$15.00</span></span></li>
<li><span>Half Arm<span>$27.00</span></span></li>
<li><span>Full Arm<span>$37.00</span></span></li>
<li><span>G-String<span>$35.00</span></span></li>
<li><span>Brazilian<span>$50.00</span></span></li>
<li><span>Half Leg<span>$40.00</span></span></li>
<li><span>Full Leg<span>$55.00</span></span></li>
</ul>
<div class="td_pack_title">
<h3>Female Combination</h3>
</div>
<ul class="td_pack_includes">
<li><span>Eyebrow & Lip<span>$25.00</span></span></li>
<li><span>Half Leg & Brazilian<span>$80.00</span></span></li>
<li><span>Full Leg & Brazilian<span>$95.00</span></span></li>
</ul>

<a class="td_btn" href="http://bookings.KonnectOnline.com.au?s=D76E979F941082BC8778F309640533E6" onclick="var l = (screen.width / 2) - 800 / 2; var t = (screen.height / 2) - 600 / 2; window.open('http://bookings.KonnectOnline.com.au?s=D76E979F941082BC8778F309640533E6', 'newwindow', 'scrollbars=1, resizable=1, width=800, height=700, left='+l+', top='+t); return false;">Book Now</a>

</div>
</div>
<p><img src="img/content4.jpg" alt="" /></p>

</footer>
</div>
</div>
</div>
</div>
</section>
<div class="space80"></div>

<section class="main_content">
<div class="container">
<div class="row">
<div class="td-col-6a">
<!-- SERVICE PACK MALE RIGHT-->
<div class="td_service_pack">
<footer class="td_pack_footer">
<div class="td_pack_footer_in">
<div class="td_pack_title">
<h3>Male Waxing</h3>
</div>
<div class="td_pack_content">
<ul class="td_pack_includes">
<li><span>Ears<span>$15.00</span></span></li>
<li><span>Nose<span>$15.00</span></span></li>
<li><span>Neck<span>$15.00</span></span></li>
<li><span>Eyebrow<span>$20.00</span></span></li>
<li><span>Shoulder & Back<span>$50.00</span></span></li>
<li><span>Chest & Stomach<span>$50.00</span></span></li>
<li><span>Half Arm<span>$45.00</span></span></li>
<li><span>Full Arm<span>$50.00</span></span></li>
<li><span>Half Leg<span>$55.00</span></span></li>
<li><span>Full Leg<span>$65.00</span></span></li>
</ul>
<div class="td_pack_title">
<h3>Male Combination</h3>
</div>
<ul class="td_pack_includes">
<li><span>Nose & Ears<span>$25.00</span></span></li>
<li><span>Back & Chest<span>$90.00</span></span></li>
<li><span>Back & Full Leg<span>$95.00</span></span></li>
</ul>
<a class="td_btn" href="http://bookings.KonnectOnline.com.au?s=D76E979F941082BC8778F309640533E6" onclick="var l = (screen.width / 2) - 800 / 2; var t = (screen.height / 2) - 600 / 2; window.open('http://bookings.KonnectOnline.com.au?s=D76E979F941082BC8778F309640533E6', 'newwindow', 'scrollbars=1, resizable=1, width=800, height=700, left='+l+', top='+t); return false;">Book Now</a>

</div>
</div>
<p><img src="img/content5.jpg" alt="" /></p>

</footer>
</div>
<!-- /SERVICE PACK MALE RIGHT -->


</div>
</div>
</div>
</section>


CSS:

.td-col-6 { width: 40%; float:left; }
.td-col-6a { width: 40%; float: right; }

Answer

Try to delete the middle part of the code.

        </div>
    </div>
</section>             
<div class="space80"></div>

<section class="main_content">
    <div class="container">
        <div class="row">

Both blocks will be in a single row.