How can I get my DIV to appear below another DIV

Question

I have this situation:

<div A>
  <div B>
  <div C>

Div A is a full screen width container for B and C. Div B is a small rectangle say 100 by 200 px Div C is another small rectangle say 100 by 200 px.

Now what happens is that B and C appear on the same line. What I would like is for C to be below B. Is it possible to position Div's in this way. I hope I make sense.

Answer 1

I'm guessing that they're floated to the left already or they wouldn't be beside each other. A simple clear: left on C will do the trick:

#B {
    float: left;
    width: 100px;
    height: 200px;
    background: #0f0;
    margin: 5px;
}
#C {
    float: left;
    clear: left;
    width: 100px;
    height: 200px;
    background: #00f;
    margin: 5px;
}

I've added some margins, paddings, and backgrounds for clarity.

Example: http://jsfiddle.net/ambiguous/uCBYV/

Answer 2

Check this out:

HTML CODE

<div id="1"> container
   <div id="2"> first in
   </div>
   <div id="3"> second in
   </div>
</div>

And then the css, to add some style:

div
{
 border-style:solid;
border-width:1px;  
}

See it in live here: http://jsfiddle.net/CaN87/

The third div goes directly on bottom of the second, and so I believe you are having some troubles in your CSS code...