why does overflow occurs?

Question

I've changed my question because I narrowed the cause of problem:

  <div id="wrapper" class="centrDiv clearfix">
            <div id="LEFT-CONTAINER">
                <div id="logo" class="centrSlik">
                    <img src="wheel.gif"/>
                </div>
                <div id="podmeni">
                    <ul><li><a>whatever</a></li></ul>
                    ...
                </div>
            </div>

            <div id="RIGHT-CONTAINER">
            <div id="meni">
                <ul>
                    <li><a href='whatever'>whatever</a></li>
                    ...
                </ul>
            </div>

            <div id="tekst">
                <p>whatever</p>
                ...
            </div>
            </div>
        </div>

CSS that describes it:

#wrapper{max-width: 1000px; margin-top: 15px; background: #99CCCC;}
#menu{overflow:auto;background: #FF9999; border-bottom-left-radius: 10px 20px; border-bottom-right-radius:20px 10px; border: 1px solid #FF9999; opacity:0.9;}
#LEFT-CONTAINER{float: left; background-color: #71637D;}

My question is why does #RIGHT-CONTAINER overflows div#menu?
I know how to fix it, but wish to know why does overflow occurs.

Thanks!

screen capture

you need to post your code of html and css to see what is going on — Sven Bieder, Jan 27 '12 at 21:52
Just a guess without seeing your real HTML... try using "display: inline-block" instead of floats. — Jeremy Armstrong, Jan 27 '12 at 21:53
Your JsFiddle code is in a different language and needs to be stripped of all distracting information. — Chris Calo, Jan 28 '12 at 06:57
@daniel.tosaba, it's still not clear to me what you are asking. Maybe try explaining (1) what you expect to happen in your code and (2) how what actually happens is different. — Chris Calo, Jan 29 '12 at 17:41

score 2 · Answer 1 · answered Jan 28 '12 at 05:28

floating a container takes it out of the "flow", similar to positioning absolute.

see these references:

http://css-tricks.com/all-about-floats/

http://css-tricks.com/the-css-overflow-property/

what you can do is place overflow:hidden on the element you don't want to conflict with the float.

score 1 · Answer 2 · answered Jan 27 '12 at 21:54

1

You need to float:left; both #left-container and #right-container or at least, float:right; #right-container, also remember to clear your floats

answered Jan 27 '12 at 21:54

Soufiane Hassou

17,257
2
39
75

Why in this I need to? `overflow:hidden` makes it work, but I still lack understanding of why does it sometimes overflow and sometimes not. This is not my first time to make multicolumn site with floats. One left float was enough, without overflow to be controlled. I have put the complete code in above post. If you have time check it out please. Thanks – daniel.tosaba Jan 28 '12 at 05:16
This answer doesn't allow a flexible width for the right column. – Chris Calo Jan 28 '12 at 07:04

score 1 · Answer 3 · answered Jan 27 '12 at 21:57

Assuming that your right container is not absolutely positioned I would set a margin-left on it equal to the width of your left-container, in this case 130px. That means that you wouldn't have to worry about all the clears and all of the elements on your page floating.

score 0 · Answer 4 · answered Jan 27 '12 at 21:59

0

CSS is a relatively poor tool for creating column layouts, unfortunately. Take a look at http://www.alistapart.com/articles/fauxcolumns/ for an alternative approach.

answered Jan 27 '12 at 21:59

xec

17,349
3
46
54

score 0 · Answer 5 · edited May 23 '17 at 10:32

Combining the answers from @Joseph and @PCasagrande and elaborating…

Applying float: left to #left-container takes it out of the flow, which essentially means all other non-floated block content is no longer aware that it exists. Therefore, #right-container, a block element, does what it normally does when there's no other content around and fills the width of its container.

An important thing to note is that inline content does get out of the way of floats. This is why in your screenshot the content inside of #right-container is placed right of #left-container while the background of #right-container ends up behind #left-container. See an example at http://jsbin.com/eyusew/edit#html,live.

By simply putting a left margin on #right-container equal to the width of the float, you essentially create some space for the float. An example: http://jsbin.com/iqufiw/2/edit#html,live. Notice that now the content in #right-container is moved to the right regardless of the presence of the float: http://jsbin.com/iqufiw/3/edit#html,live.

Side note: You will most likely want to apply some sort of clearfix CSS to #wrapper.

why does overflow occurs?

5 Answers5