Home/ Questions/Q 8349825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:07:31+00:00

I have this simple piece of code: HTML: <body> <div id=red> ABC </div> <div

  • 0

I have this simple piece of code:

HTML:

<body>  
    <div id="red">  ABC </div>
    <div id="blue"> ABC </div>  
</body>

CSS:

body{
    width: 300px;
}
#red{   
    float:left;
    width: 100px;
    height: 100px;  
    background-color: red;  
}

#blue{  
    height: 100px;
    background-color: blue;
}

I see the red squara and the blue just next to it.

However, if I add the line “width: 100px;” in the #blue, everything is ruined:
The “ABC” jumps” one line down and there is no blue background.
WHY??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because the other div is floated overtop of it. When you float something, any element that is NOT floated will have its outer bounds BEHIND the floated element. Therefor, the blue box is actually behind the red one.. but because the red is a block level element the text wont fit there, and so it sits underneath the red. float both and it will work

    http://jsfiddle.net/AUZxY/

    • 0