CODEWITHSUNDEEP
htmlcss
Dave Siegel
Dave Siegel

Reputation: 203

100% Height wrapper, breaks with float children

I have no idea what is going on here. I've tried every single fix online i could find, and couldn't get anything to work.

Putting clears wont work, and i can't user overflow:auto due to the fact that i'm positioning the navigation just out of the wrapper. Here's the example of what's wrong:

http://plustg.com/v2/

Below is the code, could really use some help here.

@CHARSET "ISO-8859-1";
* {margin:0;padding:0;} 
html, body
{
 background-color: #dcdcdc;
 padding: 0px;
 margin: 0px;
 height: 100%;
 font-family: Tahoma, Arial;
}

#wrapper
{
 border-top: 1px white solid;
 width: 1100px;
 min-height: 100%;
 margin: auto;
 background-color: #fff;

}

#headerBlue
{
 width: 1086px;
 height: 110px;
 margin: auto;
 margin-top: 7px;
 background-image: url('http://plustg.com/v2/_img/blue/header.png');
 background-repeat: no-repeat;
}

#headerPink
{
 width: 1086px;
 height: 110px;
 margin: auto;
 margin-top: 7px;
 background-image: url('http://plustg.com/v2/_img/pink/header.png');
 background-repeat: no-repeat;
}

#userStuff
{
 float: left;
 width: 216px;
 height: 88px;
 margin-top: 10px;
 margin-left: 350px;
 padding: 5px;
}

#userStuff img
{
 float: left;
}

#welcomeMessage
{
 float: left;
 font-size: 11px;
 color: #fff;
 display: block;
 margin-left: 10px;
 margin-top: 5px;
}

#notificationBar
{
 float: left;
 display: block;
 width: 129px;
 height: 23px;
 font-size: 11px;
 color: #fff;
 background-image: url('http://plustg.com/v2/_img/notification.png');
 background-repeat: no-repeat;
 margin-top: 10px;
 margin-left: 10px;
 padding-left: 5px;
 padding-top: 3px;
}

#logo
{
 width: 115px;
 height: 39px;
 float: right;
 margin-top: 20px;
 margin-right: 40px;
}

#leftBar
{
 margin-top: 10px;
 width: 160px;
 float: left;
}

#navMain
{
 width: 140px;
}

#mainBlue
{
 width: 150px;
 height: 37px;
 background-image: url('http://plustg.com/v2/_img/blue/navMain.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 margin-left: -11px;
}

#mainPink
{
 width: 150px;
 height: 37px;
 background-image: url('http://plustg.com/v2/_img/pink/navMain.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 margin-left: -11px;
}

span.mainTitle
{
 display: block;
 float: left;
 margin-left: 22px;
 margin-top: 4px;
}

#navMain ul, #navMain li
{
 list-style: none;
 padding: 0;
 margin: 0;
}

#navMain ul
{
 padding-left: 10px;
 margin-top: -5px;
}

#navMain li
{
 font-size: 14px;
 color: #1385a9;
 padding-top: 3px;
 border-bottom: 1px dotted #1385a9;
}

#navMain a
{
 font-size: 13px;
 color: #424141;
 text-decoration: none;
}

#content
{
 width: 660px;
 height: auto;
 float: left;
 margin-top: 25px;
 margin-left: 20px; 
}

#newsLatest
{
 width: 654px;
 height: 157px;
 background-image: url('http://plustg.com/v2/_img/newsbg.png');
 background-repeat: no-repeat;
}

img.newsImg
{
 float: left;
}

.titleBit
{
 float: left;
 margin-left: 10px;
 margin-top: 10px;
 font-size: 12px;
 color: #535455;
 width: 400px;
}

.newsCat
{
 color: #e96125;
}

.byBit
{
 float: left;
 margin-left: 16px;
 font-size: 11px;
 color: #8d8e8f;
}

a.author
{
 color: #2e821a;
}

span.comments
{
 background-image: url('http://plustg.com/v2/_img/balloon-left.png');
 background-repeat: no-repeat;;
 padding-left: 20px;
}

span.comments a
{
 color: #000;
}

.newsBit
{
 float: left;
 width: 390px;
 height: 70px;
 font-size: 11px;
 color: #535455;
 margin-left: 16px;
 margin-top: 13px;
}

.buttonBit
{
 float: left;
 width: 400px;
 margin-left: 16px;
 margin-top: 10px;
}

.newsMore
{
 color: #fff;
 display: block;
 font-size: 11px;
 background-image: url('http://plustg.com/v2/_img/newsButton.png');
 background-repeat: no-repeat;
 width: 112px;
 height: 20px;
 padding-top: 3px;
 padding-left: 10px;
 float: right;
}

.newsMore a
{
 color: #fff;
 text-decoration: none;
}

#tmLatest
{
 width: 660px;
 margin: auto;
 margin-top: 15px;
}

#tmLatest img
{
 width: 655px;
 margin: auto;
 cursor: pointer;
}

.switchLatest
{
 height: 25px;
 font-size: 12px;
 color: #e97a49;
 padding-right: 5px;
}

.switchLatest a
{
 display: block;
 float: right;
 text-align: center;
 width: 17px;
 height: 17px;
 border: 1px solid #e97a49;
 margin-top: 3px;
 margin-left: 5px;
 color: #e97a49;
 text-decoration: none;
}

.switchLatest a:hover
{
 background-color: #e97a49;
 color: #fff;
}

#forumStats
{
 width: 388px;
 float: left;
 height: 50px;
}

.forumBar
{
 height: 23px;
 background-image: url('http://plustg.com/v2/_img/barGreen.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 padding-left: 10px;
 padding-top: 3px;
}

#selfyLatest
{
 width: 248px;
 float: right;
 height: 50px;
}

.selfyBar
{
 height: 23px;
 background-image: url('http://plustg.com/v2/_img/barRed.png');
 background-repeat: no-repeat;
 font-size: 12px;
 color: #fff;
 padding-left: 10px;
 padding-top: 3px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PlusTG Design v2</title>
<link href="_inc/_css/v1.css" title="compact" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
 <div id="headerBlue">
  <div id="userStuff">
   <img src="http://plustg.com/v2/_img/defaultAvatar.png" alt="defaultAvatar" />
   <span id="welcomeMessage">Welcome <strong>Collussus</strong></span>
   <span id="notificationBar"><strong>1</strong> new notification</span>
  </div>
  <div id="logo"><img src="http://plustg.com/v2/_img/logo.png" alt="Logo" /></div>
 </div>
 <div id="leftBar">
  <div id="navMain">
   <div id="mainBlue">
    <span class="mainTitle"><strong>Main Menu</strong></span>
   </div>
   <ul class="blue">
    <li>&raquo; <a href="#">Home</a></li>
    <li>&raquo; <a href="#">Selfy Maker</a></li>
    <li>&raquo; <a href="#">Profiles</a></li>
    <li>&raquo; <a href="#">Bookmarklets</a></li>
    <li>&raquo; <a href="#">Advertise Us</a></li>
    <li>&raquo; <a href="#">Contact</a></li>
   </ul>
  </div>

 </div>

 <div id="content">
  <div id="newsLatest">
   <img src="http://plustg.com/v2/_img/newsTestImg.png" alt="test" class="newsImg" />
   <div class="titleBit">&#147;<strong>[01/29/2011]</strong> <span class="newsCat">Maintenance</span>: And we're back!&#148;</div>
   <div class="byBit">By <a href="#" class="author">Collussus</a> <span class="comments"><a href="#">51</a></span></div>
   <div class="newsBit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec ante sapien, eget convallis ligula. Ut consectetur risus ac purus ullamcorper non varius enim pulvinar. Etiam tristique urna sed mauris porttitor iaculis. Phasellus dui nisi, vehicula id laoreet ut, tristique in dui. In et euismod massa. Morbi pharetra sagittis dui. </div>
   <div class="buttonBit"><span class="newsMore"><a href="#">Read More &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &raquo;</a></span></div>
  </div>
  <div id="tmLatest">
   <img src="http://img.tinierme.com/shop_gacha/gacha/2011/01/img/20110128_time/110128_time_title.jpg" alt="Gears of Time" />
   <div class="switchLatest"><a href="#">5</a><a href="#">4</a><a href="#">3</a><a href="#">2</a><a href="#">1</a></div>
  </div>

  <div id="forumStats">
   <div class="forumBar"><strong>Latest Forum Activity</strong></div>
   <div class="forumContent">
    <div class="onePost">
     <img src="http://plustg.com/v2/_img/defaultAvatarS.png" />
     tests
    </div>

   </div>
  </div>
  <div id="selfyLatest">
   <div class="selfyBar"><strong>Latest Saved Selfy</strong></div>
   <div class="selfyContent">stuff here<br />test</div>
  </div>

 </div>
</div>

</body>
</html>

Upvotes: 1

Views: 1732

Answers (1)

thirtydot
thirtydot

Reputation: 228302

I'm not 100% certain I understand your problem. Is is that the white background on #wrapper does not come down to the bottom of the page?

If so:

  • Just before the closing tag for #wrapper, add: <br style="clear: both" />.
  • From #forumStats, remove height: 50px and add overflow: auto.

This fixes it in Firefox.

Upvotes: 5

Related Questions