I have no idea what is going on here. I’ve tried every single fix

Question

0

Asked: May 19, 20262026-05-19T14:10:40+00:00 2026-05-19T14:10:40+00:00

I have no idea what is going on here. I’ve tried every single fix

0

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>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-19T14:10:41+00:00

Editorial Team

2026-05-19T14:10:41+00:00Added an answer on May 19, 2026 at 2:10 pm

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.

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have no idea what is going on here. I’ve tried every single fix

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply