Can someone explain in detail how the clear works in this code?

Question

I am new to CSS. I have a Top, Right, and Content div. I want it to look like this:

Top     Right

Content

However, it is showing up like this:

Top Content Right

I know I need a clear somewhere, but I am not sure where because I am unclear on how clears actually work, so can someone please explain the html code below on where I would apply the clear and what type of clear I would choose (left, right, or both). Here is the stripped down html code:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

Answer 1

Put a DIV that clears right after the Right div:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="clear:both;"></div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>

Answer 2

Put the clear on the Content <div>:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; clear: both;
            border:1px solid blue;">Content</div>

This pushes the Content <div> so that it is below any floating elements (from the left or the right).

A side note: you probably should use CSS classes or the id attribute for convenience instead of inlining using style.

Answer 3

Although it doesn't work in all cases the WebToolkit's clearfix technique helps alleviate most of these concerns.

Usage

<div class="clearfix">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>
<div>
  Some block content that doesn't overlap the floats
</div>

Also see the demo

Code

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}