CODEWITHSUNDEEP
csscss-float
Jonas Mandahl Pedersen
Jonas Mandahl Pedersen

Reputation: 63

Floating divs not aligning the way I want them

A very simple css question. I have a page where I want my blocks to float nicely:

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: left; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div></div>

I would like the green div to be display just under the red div and not aligned with the end of the blue div.

Changing the order is not a solution for me as they are coming in a specific order from the DB.

Regards Jonas

Upvotes: 2

Views: 112

Answers (3)

doctororange
doctororange

Reputation: 11810

<div style="float: left; width: 620px;">
    <div style="float: left; clear: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left;  clear: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

Live example.

Upvotes: 1

Harry
Harry

Reputation: 89750

If I understood your requirement correctly, the below is what you need.

I changed the Blue div to float: right so that the Green div comes just under the Red div.

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

Working Demo

Upvotes: 1

aletzo
aletzo

Reputation: 2481

<div style="clear:left;float: left; width: 300px; background-color: Green; height: 230px;"></div>

or

<br><div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>

or

<div style="float: left; width: 330px;">

It's up to you.

Upvotes: 0

Related Questions