Dear community members,
I am actually a bit new to CSS, however I know my way around after a two weeks of studying. However at the moment I have a small problem with layers (div-tags) that I can’t seem to fix. The problem is as follow, I have created the following to demonstrate my problem.
<body style="margin: 0;">
<div style="margin: 0px auto; width: 960px;" id="main">
<div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
Hello World
</div>
<div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
Hello next World!
</div>
</div>
</body>
The problem here is, if you “look at the borders” (I have removed; background-color and border property to increase the readability of the code), you will notice that the first main div doesn’t wrap around div one and two. If I want to fix it, I only have to add some contents to the main layer. resulting in the following code:
<body style="margin: 0;">
<div style="margin: 0px auto; width: 960px;" id="main">
<div style="clear: both; float: left; width: 100%; height: 100px;" id="one">
Hello World
</div>
<div style="clear: both; float: left; width: 100%; height: 200px;" id="two">
Hello next World!
</div>
LET ME SOLVE IT!
</div>
</body>
The question now is, how do I get the last result without adding “just contents” to my main layer?
Thank you very much for reading my question and answering it!
For images please see: http://www4.picturepush.com/photo/a/7808622/img/7808622.png and http://www3.picturepush.com/photo/a/7808636/img/7808636.png
(NOTE: all are direct links ;))
Add overflow:hidden to your container div. This will force the div to ‘wrap’ around your inner divs. Welcome to Stack Overflow!