CSS floats - space / space left on top when floating right?

Question

This is a little hard to describe, but there is basically an unwanted space left by a floating div on my page. Here are photos describing the problem. Black boxes are divs.

Before swimming:

After swimming:

Desired effect:

And I'm not sure if that matters, but I also have an empty div with "clear: both" that fits right after the floating div.

How can i achieve this?

Answer 1

<div class="a1">a1</div>
<div class="a2">a2</div>

.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:left; 
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  float:left;
}

======= try this

Answer 2

If possible, put float: right divbefore unclosed divin HTML.

Answer 3

. / div , div ( div) , div.

Answer 4

HTML
<div id="container">
   <div id="main">
     blah blah blah blah blah
   </div>
   <div id="aside">
   this goes to the side
   </div>
   <div id="clear"></div>
</div>

CSS
div#container
{
    width : 80%;//your preference
    height : auto;
    margin : 0 auto;//Centers the page
}

div#main
{
    width : 70%;
    height : auto;
    display : block;//to wrap it up inside its width
    float : left;//float it towards left
}

div#aside
{
    width : 30%;//take up rest of the width size
    height : auto;
    display : block;
    float :right;//float towards right
}

#clear
{
    clear : both;//this will do the job
}

Answer 5

div float: left. div, , .

Answer 6

, div. margin-right div , ( + paddding + margin) div.

div.

:

<div id="container" style="width: 410px;">
<div style="float: right; width: 200px;">
  <p> Right div</p>
</div>
<div style="width: 200px; margin-right: 210px;">
  <p> Left Div</p>
</div>
<div style="clear:both;"></div>
</div>

<div id="container" style="width: 410px;">

<div style="float: left; width: 200px; margin-right: 10px;">
  <p> Left Div</p>
</div>
<div style="float: left; width: 200px;">
  <p> Right div</p>
</div>
<div style="clear:both;"></div>
</div>

Answer 7

div , , .

Answer 8

If a1 should appear on the floating side to the right of a2, then you should put a1 FIRST in html and swim to the right. The bit counter is intuitive, but its way of working with floating point.

<div class="container">
  <div class="a1">a1</div>
  <div class="a2">a2</div>
</div>
<style>
div
{
  border: solid 2px #000;
  background-color: #eee;
}
.a1
{
 background-color:Red;
  width:200px;
  height:200px;
float:right; /* the trick is, a1 appears BEFORE a2 in the html, yet
we are floating a1 right .  if you do it the other way around
( try and float a2 ) then it will work like you showed
(separate line)*/
}
.a2
{
  background-color:Green;
  width:200px;
  height:200px;
  /* don't float this one */

}
</style>

Answer 9

There is a problem with spaces with floats. That is why the second box is a little lower.

<div style="float:left">a1</div><div style="float:left">a2</div>

will work.

<div style="float:left">a1</div>
<div style="float:left">a2</div> 

will not work