CODEWITHSUNDEEP
css
Brandon
Brandon

Reputation: 2125

Make CSS float columns align at top

http://jsfiddle.net/y88mq/1/

I have a simple layout with three containers: one, two, three. I am trying to get three to align at the top with one. Right now one and two are floated left and three is floated right. I tried combinations of clearing but it didn't seem to work. I would like to get this to work with just CSS.

<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
    background: red;
    width: 66%;
    height: 200px;
    margin-bottom: 10px;
    float: left;
}

.right {
    background: green;
    width: 33%;
    float: right;
    height: 200px;
}

EDIT: I would like to keep the source order the same

Upvotes: 1

Views: 2133

Answers (5)

babsgosgens
babsgosgens

Reputation: 21

If you wrap columns one and two in a div, you effectively float the wrapper div and column three side by side and aligned at the top. The wrapper div will hold columns one and two stacked.

Extra advantage of this approach is that you can choose the align columns one and two on one line if there is more space available.

Semantically, your columns would still be in the same order.

Upvotes: 0

Delvin Paul
Delvin Paul

Reputation: 359

<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
   background: red;
   width: 32%;
   height: 200px;
   margin-right:  20px;
   float: left;
}

.right {
   background: green;
   width: 33%;
   float: right;
   height: 200px;
}

Upvotes: 0

Martyn0627
Martyn0627

Reputation: 739

If you must keep the order of the HTML the same, then all i can think of is to use:

position: absolute;

I have made the changes to your Fiddle: http://jsfiddle.net/hRdEf/

Hope that helps.

Upvotes: 1

Red2678
Red2678

Reputation: 3297

Just place the "right div" at the top of the listed divs. 

<div class="right">three</div>    
<div class="left">one</div>
<div class="left">two</div>

..//rest of code

http://jsfiddle.net/y88mq/7/

Upvotes: 0

Anonymous
Anonymous

Reputation: 553

Due to the nature of CSS and its evil floats, I suggest you rearrange the order of the boxes. This will work fine:

<div class="left">one</div>
<div class="right">three</div>
<div class="left">two</div>

See: http://jsfiddle.net/y88mq/2/

Upvotes: 1

Related Questions