Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

page wrapper isn't containing or wrapping at all?

page wrapper isn't containing or wrapping at all?

Problem

Not sure, my isn't wrapping all the way down. Now to make things easier I added borders to everything and background colors to everything. So here is my html...

Now I could add a Float Left to the page-wrapper div, but that is a hack and not the right way to do it. Now everything is working just the way it is even the way its setup now, but I don't like what a div isn't wrapping, its really annoying.

Here is the JSFiddle http://jsfiddle.net/ywgpB/15/

HTML

Welcome!

Dummy Text

Working Hours

MON - FRI 5:00 AM to 11:00 PM
SAT - SUN 7:00 AM to 8:00 PM

Location

Our Members

Classes

Programs

CSS

body{
    background-image: url(../images/pageglare.png);
    background-repeat: no-repeat;
    color: #000305;
    font-size: 87.5%;
    font-family: Tahoma, Arial, "Lucida Sans Unicode";
    line-height: 1.5;
    text-align: left;
}

#page-wrapper{
   margin: 0 auto;
   width: 90%;
   background-color: pink;
   clear: both;
   border: 2px solid darkorange;
}

.logoContainer{   
   width: 15%;
   border: 2px solid blue;
   margin: 2% 0;
 }



 .leftContainer{
   border: 2px solid darkcyan;
   width: 25%;
   float: left;
   background-color: cyan;
   display: block;
 }

 .welcome{
   width: 100%;
 }

 .welcome img{
   float: left;
 }

.hours{
   float: left;
   width: 100%;
 }

.location{
    float: left;
    width: 100%;
 }

#main{
   width: 65%;
   margin: 0 2%;
   border: 2px solid green;
   float: left;
   background-color: lightgreen;
}

#banner{
   width: 98%;
   height: 300px;
   border: 2px solid gray;
   float: left;
}

.containBox{
   margin-left: 1%;
   width: 97%;
   border: 2px solid black;
   height: 250px;
   clear: both;
   background-color: gray;
   float: left;

}

 .box{
    width: 30%;
    border: 2px solid red;
    height: 250px;
    float: left;
  }
Problem courtesy of: dragonore

Solution

Add overflow: hidden to wrapper, or element with clear: both after floating elements.

#page-wrapper {overflow: hidden}

http://jsfiddle.net/ywgpB/16/

Solution courtesy of: panther

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

page wrapper isn't containing or wrapping at all?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×