Geek Answers Handbook

How can I make my div appear under another div

I have this situation:

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

Div A is the screen width container for B and C. Div B is a small rectangle that says 100 by 200 px Div C is another small rectangle that says 100 by 200 px.

Now it happens that B and C appear on the same line. I would like C to be lower than B. Is it possible to position the Div in this way. Hope I make sense.

+5
source share
3 answers

I assume that they are already swimming on the left, or they will not be next to each other. A simple clear: leftC 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 added some fields, paddings and backgrounds.

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

+5

:

HTML-

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

css, :

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

: http://jsfiddle.net/CaN87/

div , , CSS...

+1

By default, C should be lower than B. Can you host some html and styles applied to the div? It looks like something is changing their display to "inline" or that they are floating.

0
source

More articles:


All Articles