Robolisk Robolisk - 6 months ago 17
CSS Question

having two div blocks aligned side by side - wordpress website

I'm creating a custom landing page for my employers website.

http://juniorgoldreport.com/welcome/ this is the landing page.

I'm just trying throw some idea's until we find something solid, so at the moment the landing page is extremely simple.

I'm having trouble splitting my body into two different div blocks.

<div class="welcome-landing">
<div class="landing-header">
<div class="logo-img">
<img src="http://juniorgoldreport.com/wp-content/uploads/2016/05/logoo2.png" alt="junior gold report logo" />
</div>
</div>

<div class="landing-bar">
<ul class="landing-nav">
<li> <a href="http://juniorgoldreport.com/about-us/">About Us</a> </li>
<li> <a href="http://juniorgoldreport.com/accredited-investors/" style="color:#cacaca">Accredited Investors</a> </li>
</ul>
</div>

<div class="landing-body">
<div class="body-left">
[layerslider id="11"]
</div>
<div class="body-right">
TEST BLOCK
</div>

</div>
<div class="landing-footer">
FOOTER TEST
</div>
</div>


Where you see the "TEST BLOCK" is the block I'm having trouble with. I have a subscribe button in there right now when you look at it in the website.

Answer

Remove any character between two horizontal Divs

  <div class="landing-body">
    <div class="body-left">
    //content here
    </div><div class="body-right">     <-- </div><div> No character in between
    //content here      
   </div>
  </div>

add following css

.body-left, .body-right {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}