div elements being disobedient

Question

Elements of my page are breaking out of "wrapper" div. Here is the structure:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="stilovi.css" rel="stylesheet" type="text/css"/>
        <link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'/>
    </head>
    <body>
        <div id="wrapper" class="centrDiv">
            <div id="levo">
                <div id="logo" class="centrSlik">
                    <img src="wheel.gif"/>
                </div>
                <div id="podmeni">
                    <ul>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>

                    </ul>

                </div>


            </div>
            <div id="desno">
            <div id="meni">
                <ul>
                    <li></li>
                </ul>

            </div>


            <div id="tekst">
                <p>
                  ttaatareatasfgfgfd
                </p>

            </div>
            </div>
        </div>
    </body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
</html>

And CSS styles:

* { padding: 0; margin: 0; list-style: none; font-family: 'Philosopher', cursive; text-decoration: none; color: black;}
#wrapper{width: 930px; height:100%; margin-top: 15px; background-color: #71637D;}
#meni{background-image: -webkit-gradient(linear, left top, right bottom, from(#FF9999), color-stop(100%, #71637D)); padding: 8px 15px 10px;
-webkit-border-bottom-left-radius: 10px 20px; -webkit-border-top-right-radius:10px 20px; border: 1px solid #FF9999; opacity:0.9; -webkit-box-shadow: 5px 5px 20px #4AC0F2;}
#levo{width: 130px; min-height: 350px; background-image: -webkit-linear-gradient(top, #71637D 120px, #4AC0F2);
         float: left;}
#tekst{padding: 20px 15px;}
#tekst p{margin-bottom: 10px;}
#logo{background-color: white;}
#desno{width: 800px; min-height: 350px; background-image: -webkit-linear-gradient(-75deg, #71637D 30%, #4AC0F2); float: right;
-webkit-border-top-right-radius:10px 20px; }

#podmeni ul{height: 220px; -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#FF9999), color-stop(100%, #4AC0F2)) 0 100% 0 0/0 5px 0 0 stretch;}
#meni li{letter-spacing: 2px; font-size: 16px; font-weight: bold;  display: inline; margin-right: 5px;}
#meni li:hover{-webkit-border-image: -webkit-gradient(linear, right top, left top, from(#FF9999), color-stop(100%, transparent)) 0 0 100% 0/0 0 5px 0}
#meni a{text-shadow: 0.1em 0.1em #333;}

.centrDiv{margin: 0 auto;}
.centrSlik{text-align: center;}
.nevidljivo{display:none;}

In firebug all elements are out of div#wrapper. Why??

This is what's in your question, and I'm not seeing what you're describing in Firebug: http://jsfiddle.net/GR2fT/ — Jared Farrish, Aug 24 '11 at 23:21
Validate your code with W3C http://validator.w3.org/ Fix all the errors you get there and you will find the problem. — Derek Organ, Aug 24 '11 at 23:21
For another thing, you have your jQuery script includes tag outside of the `` and `` sections. You should really put it **inside** one or the other. — Sparky, Aug 24 '11 at 23:37

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Adding a "clearfix" or float:left to #wrapper seems to alleviate the issue.

Clearfix: http://jsfiddle.net/GR2fT/1/

Float: http://jsfiddle.net/GR2fT/2/

overflow:hidden: http://jsfiddle.net/GR2fT/3/

overflow:auto: http://jsfiddle.net/GR2fT/5/

/* one way to clearfix */
.clearfix:after,
.clearfix:before {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}  
.clearfix:after {
    clear: both;
}

The elements are still "in" the #wrapper, you just couldn't see the background.

Clearfix is good when you can't use float (unknown width but you want 100% width, for example).

The overflow trick is good too, but I think it works best in modern browsers and is not always applicable.

Related: Is clearfix deprecated?

edited May 23 '17 at 12:12

Community

1
1

answered Aug 24 '11 at 23:32

Wesley Murch

101,186
37
194
228

I'm not 100% sure, I always just use clearfix. I checked your fiddle in IE6-9 in IETester and they all looked fine. – Wesley Murch Aug 24 '11 at 23:43
We should call it the IE6 twitch. I don't know either. – Jared Farrish Aug 25 '11 at 00:06

div elements being disobedient

1 Answers1