Home/ Questions/Q 8953053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:00:48+00:00

I know this is kind of a stupid doubt about floating CSS layout, but

  • 0

I know this is kind of a stupid doubt about floating CSS layout, but I can’t find the answer anywhere.
I want to have a simple page, with a big red reactangle in the middle, and 2 blue squares within, one on each side of the rectagle.
I have the following HTML code:

<body>
  <div id="rectangle">
    <div id="left"></div>
    <div id="right></div>
  </div>
</body>

and then I have this css:

       #rectangle {
            width: 600px;
            margin: auto;
            padding: 50px;
            background-color: red;
        }
        #left {
            float: left;
            width: 250px;
            height: 250px;
            background-color: blue;
        }
        #right {
            float: right;
            width: 250px;
            height: 250px;
            background-color: blue;
        }

And this doesn’t work, because the red rectangle doesn’t adapt its height to cover the blue squares because they are floating I guess…
The only way I know to solve this is adding a new 

<div id="footer"></div>

at the end of the rectangle div, with style 

clear: both;

and I’m sure there should be a more elegant way to do this, isn’t there?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simply add overflow: auto to the #rectangle div.

    Example: http://jsfiddle.net/ZVJQN/

    • 0