CODEWITHSUNDEEP
htmlcss
JoseBazBaz
JoseBazBaz

Reputation: 1445

How to Float Left or Right Twice?

Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.

However if I use float:left and float:right twice, I get the following:

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT

rather than

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

This is because, when I float for the second time the css floats for the remaining space left.

How do I fix this bug?

Upvotes: 1

Views: 930

Answers (5)

Sumit Gera
Sumit Gera

Reputation: 1241

This works for me.

.right {
    float:right;
} 

.left {
    float:left;
}​
<div>
    <div class="right">1 element</div>
    <div style="clear:both"></div>
    <div class="right">1 element</div>

    <div class="left">1 element</div>
    <div style="clear:both"></div>
    <div class="left">1 element</div>
</div>

​ Here is the fiddle. http://jsfiddle.net/nQvEW/143/

Upvotes: 0

Raghvendra Parashar
Raghvendra Parashar

Reputation: 4053

Please have a look here on jsfiddle

.wrapper {
   height:100px;
   border:1px solid red;
   margin: 5px;  
}

.left {
   margin: 10px;    
   float:left;
   width: 45%;    
}

.right {
   margin: 10px;
   float:right;
   width: 45%;
}
<div class="wrapper">
    <div class="left">element 1</div>
    <div class="right">element 2</div>
</div>
<div class="wrapper">
    <div class="left">element3</div>
    <div class="right">element4</div>
</div>

enter image description here

Upvotes: 0

Surinder ツ
Surinder ツ

Reputation: 1788

You can use clear:both; with float:left; property.

Try Jsbin demo

.left {
   float:left;
   width:40%;
   height:240px;
   border:1px solid red;
}

.right {
   float:right;
   width:40%;
   border:1px solid red;
   height:240px;
} 

.elem1 {
   float:left;
   margin-bottom:20px;
}

.elem2 {
   float:left;
   clear:both;
}

.elem3 {
   float:left;
   margin-bottom:20px;
}

.elem4 {
   float:left;
   clear:both;
}
<div class="left">
    <div class="elem1">element 1</div>
    <div class="elem2">element 2</div>
 </div>
 <div class="right">
    <div class="elem3">element3</div>
    <div class="elem4">element4</div>
</div>

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Try this one:

Markup:

 <div class='clear:both'>
    <!-- left container -->
    <div style = "float:left;">
     <div style = "float:left;">
       Element
     </div>
     <div style = "float:left; clear:left;">
       Element
     </div>    
    </div>
   <!-- right container -->
   <div style = "float:right">
   <div style = "float:right;">
      Element
     </div>
   <div style = "float:right; clear:right;">
     Element
    </div>
</div>

Please use your own external style, this is just to guide you.

Upvotes: 0

Brad
Brad

Reputation: 163240

What you need is a clear: both in your CSS.

Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.

Upvotes: 0

Related Questions