0

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 ;))

Snowflake
  • 2,869
  • 3
  • 22
  • 44

2 Answers2

2

Add overflow:hidden to your container div. This will force the div to 'wrap' around your inner divs. Welcome to Stack Overflow!

huzzah
  • 1,793
  • 2
  • 22
  • 40
  • Also, divs are block elements by default, so there is no need to add width:100% to your inner divs, as they will stretch to fit their parent div (960px) already. – huzzah Mar 16 '12 at 14:42
  • I got a question, can you explain why actually this happens? Thank you for the warm welcome, I really appreciate your response! – Snowflake Mar 16 '12 at 15:20
  • Heh, good question. You can find an explanation in this answer here: http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem but it's a little hard to wrap your head around. By the way, if you liked my answer and found it useful, perhaps you might consider marking it as the accepted answer so I can get a little SO rep juice. Happy coding! – huzzah Mar 16 '12 at 15:33
0

Snowflake
Add a clear div an put it as the last div inside your wrapper. Also, avoid using percentages for your width, if your wrapper has a fixed with then use fixed width for your inner divs. Hope this helps!

rolando.pdl
  • 51
  • 3
  • 10