CODEWITHSUNDEEP
csscss-floathtml
MikO
MikO

Reputation: 18741

Float basics in CSS

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?

Upvotes: 1

Views: 140

Answers (2)

Harshit Tailor
Harshit Tailor

Reputation: 3281

add clear div

<div id="rectangle">
    <div id="right"></div>
    <div id="left"></div>
      <div class="clear"></div>
  </div>​​​​​​

.clear
{
    clear:both;
}
​

Upvotes: 0

justisb
justisb

Reputation: 7270

Simply add overflow: auto to the #rectangle div.

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

Upvotes: 1

Related Questions