I was considering deploying divs on their content when using float positioning (e.g. overflow solution: hidden), but I'm trying to learn absolute / relative positioning and can't figure out why the container container is crashing. My test case:
<html> <head> <style type="text/css"> body { background-color:#eee; } #content { margin:0 auto; position:relative; border:1px solid red; width:800px; display:block; background-color:white; } #header { border:1px solid black; background-color:#777; color:white; width:800px; position:absolute; left:0; top:0; } #leftcol { position:absolute; border:1px solid black; background-color:#ddd; width:200px; top:100px; left:0; } #rightcol { position:absolute; top:100px; left:205px; border:1px solid black; background-color:#ddd; width:500px; } </style> <title>CSS Positioning Example 1</title> </head> <body> <div id="content"> <div id="header"> <h1>The Awesome Website</h1> </div> <div id="leftcol"> <h2>About</h2> <p> This website is so awesome because it was made by someone and that is really all there is to it. There. </p> </div> <div id="rightcol"> <p>This is where I'm going to put some real body text so that it goes on and on for a while and so I can get a sense of what happens when the text in the paragraph keeps going and the box containing it keeps going on as well. </p> </div> </div> </body> </html>
What's going on here? Why does the red border content of a div break apart even if it contains other divs?
source share