0

I am trying to float two elements side by side but the preceding div elements seem to come in between the two as per the fiddle. i.e I want Find the best vendor on the left, login/register in the same line on the right and all other content below it.

HTML: 

<div id="home-dir-left">
 <div class="custom-widget-head">
   <h3><span class="custom-section-head"> Find the Best Vendor</span></h3>
     <a href="/login/" class="btn tools-login">Login / Register</a>
 </div>

  <div class="homecat-columns">
    <div class="span2 directory-categories">
       <div class="custom-widget-head">
         <h4><span class="dircat-head"> Fashion</span></h4>
       </div>   

      <span class="span-dircat">
         <ul>
    <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a></li>
         </ul>
  </span>

   </div>
 </div>
</div>
user2798091
  • 586
  • 5
  • 7
  • 25
  • 2
    You should clear the float at the end of `.custom-widget-head` element, as: http://jsfiddle.net/hashem/pLBmz/1/ Explanation **[here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734)** – Hashem Qolami Mar 07 '14 at 09:51

3 Answers3

0

Do you want to do like this,please visit the link:

http://jsfiddle.net/pLBmz/2/

        <div class="custom-widget-head"style="clear:both;">
            <h4><span class="dircat-head"> 
    Fashion</span></h4>

        </div>  <span class="span-dircat">

        <ul>
            <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a>


        </li></ul>
    </span>
NDK
  • 1
0

you have to clear you floats using a class clearfix

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

DEMO

Alex
  • 457
  • 3
  • 16
-1

Make change in followin css class

.custom-section-head 
   {
    margin: 20px 0px 0px 0px;
  }
.tools-login
 {
   margin: 30px 0px 0px 0px;
  }

Add <br><br> before <ul>

bv.ebizzinfotech
  • 62
  • 1
  • 13