ForumEasy.com

Edit Your Code:
<!DOCTYPE html>
<html>
  <head>
    <style>

     /* edit or add your own CSS code here */

  .container {
        margin: 5px;
        border: 2px dashed #000000;
        width: auto;
        height: 220px;
    }
    .box {
        margin: 10px;
        width: 40px;
        height: 50px;
    }
    #box1 {
        background-color: red;
        float: left;
    }
    #box2 {
        background-color: green;
        float: right;
    }

    </style>
  </head>
  
  <body>

   <h2>CSS Float Example -- Floating Flow</h2>

<DIV class="container">
    <div class="box" id="box1">Box#1</div>
    <div class="box" id="box2">Box#2</div>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
</DIV>

<p>As it can be seen, the two boxes are out of normal flow with one floating to the left and the other to the right. More important is that the text are not overlapped by those bloating boxes. </p>
    
  </body>
</html>
Result Output:

Home » Sandbox