CODEWITHSUNDEEP
csscss-float
Oldenborg
Oldenborg

Reputation: 936

Float left and right

this problem has been bothering me for some time. So I have created some visual descriptions of my problem

First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here

EDIT// Sorry heres my HTML and CSS

<style>
    .left { float:left; }
    .right { float:right; }
</style>
<div id="container">
   <div class="left"></div>
   <div class="left"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right"></div>
   <div class="right"></div>
</div>

NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch

/EDIT

This is a mocukup of my HTML structure

My floats result in this

this is my current result

This is what I want

I want this

Upvotes: 36

Views: 43913

Answers (8)

Ricky Stam
Ricky Stam

Reputation: 2126

Try this:

.leftcolums {
  float: left;
}

.rightcolums {
  float: right;
}

.clear {
  clear: both;
}
<div class="leftcolums">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>
<div class="rightcolums">
  <div class="right">4</div>
  <div class="right">5</div>
  <div class="right">6</div>
</div>
<div class="clear">7</div>

Upvotes: 2

Vlad
Vlad

Reputation: 31

column-count is already widely supported - http://caniuse.com/#feat=multicolumn So if old browsers doesn't bother you consider using it.

Upvotes: 2

Дамян Станчев
Дамян Станчев

Reputation: 2664

Add the first left div, then the first right div and after them add <br style="clear:both"> and repeat the procedure.

Edit: Here's an updated answer:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

Upvotes: 7

sandeep
sandeep

Reputation: 92803

You can use CSS3 column-count property for this. Write like this:

.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}

Check this http://jsfiddle.net/UaFFP/6/

Upvotes: 16

jacktheripper
jacktheripper

Reputation: 14219

Using the :nth-child selector and clearing after 2 divs:

​div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(2n) {
    background-color: green;
    float: right;
}

Live example

Otherwise use this fairly hacky method, which requires no additional markup:

div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(n) {
    clear: both;
}

div:nth-child(2n) {
    background-color: green;
    float: right;
    margin-top: -50px; //match this to the div height
}

​ Live example

Upvotes: 0

khaled_webdev
khaled_webdev

Reputation: 1430

Float one left , one right, and give first the clear:both property

<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>

css

.left {float:left}
.right {float:right}
.clear {clear:both}

Example

Upvotes: 21

bdede
bdede

Reputation: 31

<style type="text/css">

.parent {width:50px; border:1px solid red;}

.left {float:left; }

.right{float:right;}

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}

</style>

<body>

<div class="left parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<div class="right parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

</body>

</html>

Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.

Upvotes: 3

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9713

Suppose you have another div in the middle of them. Then use this chronological order:

<div class="left"></div>
<div class="right"></div>
<div class="content"></div>

Or if you don't, just add another div that provide a style clear:both to it.

Upvotes: 3

Related Questions