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:\[code\]<body> <div id="rectangle"> <div id="left"></div> <div id="right></div> </div></body>\[/code\]and then I have this css:\[code\] #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; }\[/code\]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 \[code\]<div id="footer"></div> \[/code\]at the end of the rectangle div, with style \[code\]clear: both;\[/code\]and I'm sure there should be a more elegant way to do this, isn't there?
Float basics in CSS
- Thread starter Ballin
- Start date