CODEWITHSUNDEEP
htmlcss
Jakob Toftegaard
Jakob Toftegaard

Reputation: 73

CSS let floats fill unused space

Hi I have a little css float problem.

I have 3 floating div's. As viewed below

<div style="width : 200px;">
   <div style="float : left; width : 90px; height : 50px; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px; ">div 2</div>
   <div style="float : left; width : 90px; height : 50px; ">div 3</div>
</div>

What I want is that div number 3 is floating up in the empty space below div 1.

Is that possible with css?

Upvotes: 0

Views: 962

Answers (3)

kevinandrada
kevinandrada

Reputation: 499

I think your best bet is wrapping div 1 and div 3 on a <div> then floating that to left. Like the following code:

<div style="width : 200px;">
   <div style="float: left;">
      <div style="width: 90px; height: 50px;">div 1</div>
      <div style="width: 90px; height: 50px;">div 3</div>
   </div>
   <div style="float: left; width: 90px; height: 90px;">div 2</div>
</div>

jsFiddle sample

Upvotes: 0

Jon
Jon

Reputation: 6541

float your div 2 to the right not left.

And write your css properly, not as style in the div

http://jsfiddle.net/feqJT/1

.b{float : right; width : 90px; height : 90px;}

You can then get rid of space by changing the size of the holding div, or add padding-right:20px; or margin-right:20px; depending what you want. Difference between padding and margin for a different post.

.b{float : right; width : 90px; height : 90px; margin-right:20px;}

Upvotes: 4

Narendra
Narendra

Reputation: 3117

Use below snippet

<div style="width : 200px;">
   <div style="float : left; width : 90px; height : 50px; background-color: blue; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px;background-color: red; ">div 2</div>
   <div style="float : left; width : 90px; height : 50px;background-color: green; margin-top:-40px; ">div 3</div>
</div>

The below code will also do the same.

<div style="width : 200px;">
   <div style="float : left; width : 50px; height : 50px; background-color: blue; ">div 1</div>
   <div style="float : left; width : 90px; height : 90px;background-color: red;float:right; margin-right:60px;">div 2</div>
   <div style="float : left; width : 50px; height : 50px;background-color:green; ">div 3</div>
</div>

Back ground color is added to see the divs.

Upvotes: 0

Related Questions