CODEWITHSUNDEEP
css
Marcelo Barganha
Marcelo Barganha

Reputation: 379

How can I float two divs left (under each other) and two divs right (under each other)

I'm trying this:

DIV 1    DIV 3
DIV 2    DIV 4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

I'm trying to use clear:both but it makes a top margin..

Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case..

Here is my css:

.div1 {
  height:69px;
  float:left;
  width:48%;
  clear:both;
  background:pink;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  clear:both;
  background:lightblue;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:both;
}

Upvotes: 6

Views: 7946

Answers (6)

Mike K
Mike K

Reputation: 486

Can you reorder the divs you've got? If so, then you could replace the display:block, float and clear style rules with display:inline-block (for all four divs).

Then you'd have to reorder the divs as (1, 3, 2, 4) to match your original layout.

Upvotes: 0

Lex
Lex

Reputation: 164

you shouldn't have to use calculation for this.

you put 3(!) div's inside a wrapper div. give the first two the desired width and set the third to display: block and clear: both. Set the divs alternating to float left and right and bob's your uncle.

HTML

<div id='wrapper-div'>
    <div id='left-div'>
        put your left-div content here.
    </div>
    <div id='right-div'>
        put your right-div content here.
    </div>
    <div id='clearing-div'></div> <!-- no content here--> 
</div>

CSS

 #wrapper-div {
    width: 600px;
    margin: 0px auto;
 }
 #left-div {
    width: 48%;
    float: left;
 }
 #right-div {
    width: 48%;
    float: right;
 }
 #clearing-div {
    display: block;
    clear: both;
 }

why this works? because of the display: block the clearing-div will fill-up the entire width of the wrapper-div. because of clear: both that doesn't allow floating objects either left or right of this div the div is placed on a new line, filling up the entire width of the wrapper-div.

In this case with the width of 48% both will appear about half the size of the wrapper-div.When you choose a set width of 200px for example, they float both left and right with 200px in between them.

if you have 4 divs you want to have 2 by 2 floating left and right you can put 2 divs inside the left-div and the right-div, looking something like this:

<div id='wrapper-div'>
    <div id='left-div'>
        <div class="div1">1</div>
        <div class="div2">2</div>
    </div>
    <div id='right-div'>
        <div class="div3">3</div>
        <div class="div4">4</div>
    </div>
    <div id='clearing-div'></div> <!-- no content here--> 
</div>

Upvotes: 0

user3982127
user3982127

Reputation:

The answers above are not in line with what TO wants. He says he can't change the order of the divs.

As div's are floated in relation the the closest floating element, it is not possible to float div 3 next to div 1.

The solution is to give div 1 a float left, div 2 a float left, div 3 a position absolute, and div 4 a float right. This is also a responsive solution, as div's 3 and 4 will position themselves under div 1 and 2.

See this example, move the vertical center line to make the screen smaller and see the div's lining up below each other.

https://jsfiddle.net/6ywja6dn/2/

.div.one { float: left; background: blue; }
.div.two { float: left; clear: left; background: red; }
.div.three { position: absolute; top: 0px; left: 52%; background: purple; }
.div.four { float: right; background: green; }

@media (max-width: 600px) {
.div.one { }
.div.two { }
.div.three { position: static; float: left; clear: left; }
.div.four { float: left; clear: left;  }
}

Upvotes: 0

bpbutti
bpbutti

Reputation: 393

Try changing the order of the HTML and change the clear of the divs. 

<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>

And CSS

.div1 {
  height:69px;
  float:left;
  width:48%;
  background:pink;
  clear:left;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  background:lightblue;
  clear:left;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
  clear:right
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:right
}

JSFiddle: https://jsfiddle.net/6ywja6dn/

Upvotes: 6

Ashwani
Ashwani

Reputation: 303

<style type="text/css">
  .left-block{
    float: left;
    clear:left;
    width: 50%;
  }
  .right-block{
      margin-left: 50%;
  }
</style>    
<div class="div1 left-block">Div 1 with float left</div>
<div class="div2 left-block">Div 2 with float left</div>
<div class="div3 right-block">Div 3 No float</div>
<div class="div4 right-block">Div 4 No float</div>

Upvotes: 0

majorhavoc
majorhavoc

Reputation: 2415

I have wrapped the divs in left and right in another div called "wrap1". Here is the fiddle. https://jsfiddle.net/4j4jasgn/1/ or you have to change the order of the div like - div1,div3,div2,div4

<div class="wrap1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="wrap1">
<div class="div3">3</div>
<div class="div4">4</div>
</div>

Upvotes: 0

Related Questions