please help!disorganise page layout as content increases

**kani alavi** · 03-30-2009, 08:27 PM

please i really need your help.one of my website page layout becomes distorted or disorganised when the size of the content increases. here is the css:

Code:

html, body, h1, h2, h3, h4, ul, li {
    margin: 0;
    padding: 0;
}
h1 img {
    display: block;
}
img {
    border: 0;
}
a {
    color: #464544;
}
a:hover {
    color: #FFA405;
}
.left {
    float: left;
}

.right {
float: right;    
}

.more {
    text-align: right;
}
.clear {
    clear: both;
}

body {
    background: #E0D5B7 url(images/page_bg.jpg) repeat-x;
    text-align: center;
    font: 11px verdana, arial, sans-serif;
    color: #74653D;
    padding-bottom: 10px;
    padding-top: 31px;
}

/** layout **/
#wrapper {
    text-align: left;
    margin: auto;
    width: 778px;
  position: relative;
  background: url(images/body_bg.gif) repeat-y;
}

#header {
    position: absolute;
    top: 0;
    left: 243px;
    width: 535px;
    height: 200px;
    background-repeat: no-repeat;
    background-image: url(images/banner1.JPG);
}
#left {
  float: left;
  width: 243px;
}

#logo {
  width: 244px;
  height: 152px;
  background: url(images/header_1.jpg) no-repeat;
  text-align: center;
  color: #595959;
}
#logo h1 {
  padding-top: 30px;
  font: 24px "arial narrow", arial, sans-serif;
}
#logo p {
  margin: 8px 25px 4px 25px;
  border-top: 1px solid #B8B8B8;
  border-bottom: 1px solid #B8B8B8;
  padding: 3px;
  letter-spacing: 0.2em;
  font-weight: bold;
}

#nav {
  background: url(images/nav_left.jpg) no-repeat;
}
#nav ul {
  margin-left: 9px;
  padding-left: 1px;
  padding-bottom: 29px;
  background: #2A2A2A bottom left url(images/nav_bot.jpg) no-repeat;
}
#nav li {
  list-style: none;
  font: 14px "arial narrow", arial, sans-serif;
  border-top: 1px solid #959595;
  background: 188px 10px url(images/arr_white.gif) no-repeat;
  padding: 7px 0 0 31px;
}
#nav a {
  color: #fff;
  text-decoration: none;
  border-left: 1px solid #959595;
  padding-left: 10px;
  display: block;
  width: 90%;
  padding: 2px 0 6px 8px;
}
#nav a:hover {
  text-decoration: underline;
}
#nav .important {
  border: none;
  background: 188px 10px url(images/arr_orange.gif) no-repeat;
}
#nav .important a {
  color: #E9C379;
}

#news {
  background: url(images/news_bg.jpg) repeat-y;
  padding-left: 37px;
  padding-right: 22px;
  padding-bottom: 3px;
  text-align: justify;
}
#news h2 {
  font-size: 12px;
  color: #BE8B06;
}
#news h3, #news p {
  font-size: 11px;
  margin: 1em 8px 1em 0;
}
#news a {
  color: #74653D;
  font-weight: bold;
  text-decoration: underline;
}
#news a:hover {
  color: #38301A;
}
#news .more {
  font-size: 9px;
}
#news .hr-dots {
  background: center url(images/dots.gif) repeat-x;
  height: 10px;
}

#support {
  background: url(images/support.jpg) no-repeat;
  padding: 1px;
  height: 97px;
  color: #1A1A18;
}
#support p {
  margin: 0.7em 2.6em;
}

#right {
  
  width: 490px;
  padding-right: 9px;
  padding-top: 200px;
  float: right;
}

#right h2 {
  font: 18px arial, sans-serif;
  color: #BE8B06;
  border-bottom: 1px solid #C4AE7C;
  padding-bottom: 6px;
  margin-bottom: 1em;
}
#right h3 {
  font: 14px arial, sans-serif;
  color: #BE8B06;
  border-bottom: 1px solid #C4AE7C;
  padding-bottom: 6px;
  margin-bottom: 1em;
  margin-top: 2em;
}
#welcome {
  margin-right: 20px;
}
#profile {
  margin-right: 16px;
}
#right .left {
  margin-right: 18px;
}
#right .more {
  font-weight: bold;
  font-size: 10px;
}

#corp, #indu {
  float: left;
  width: 49%;
}
#corp {
  margin-right: 1%;
}
#corp-img, #indu-img {
  background: url(images/pic_2.jpg) no-repeat;
  width: 112px;
  height: 23px;
  
  margin-right: 18px;
  text-align: center;
  padding-top: 90px;
  font-size: 9px;
  font-weight: bold;
  float: left;
}

#indu-img {
  background: url(images/pic_3.jpg) no-repeat;
}
#spacer {
  height: 2em;
}

#footer {
  background: url(images/footer_bg.gif) repeat-y;
}
#copyright {
  text-align: center;
  padding: 22px 0px 30px 00px;
  font-size: 9px;
  color: #715F36;
  font-weight: bold;
}
#footerline{
    background: url(images/footerline.gif) no-repeat;
    height:10px;
    margin-top:0px;
    display:block;
    font-size:1px;
}
.topicindex{

    background:url(../images/back.jpg);    
    padding-left:2px;
    padding-right:2px;
    padding-top:2px;
    padding-bottom:2px;
    
    border:solid 1px #C0C0C0;
    color:#3866A2;
    
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:12px;
    
}

and here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Wisdom Hostel</title>
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    <link href="ddlevelsmenu/ddlevelsfiles/ddlevelsmenu-base.css" rel="stylesheet" type="text/css" />
    <link href="ddlevelsmenu/ddlevelsfiles/ddlevelsmenu-sidebar.css" rel="stylesheet" type="text/css" />
    <link href="ddlevelsmenu/ddlevelsfiles/ddlevelsmenu-topbar.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="ddlevelsmenu/ddlevelsfiles/ddlevelsmenu.js"></script>
</head>

<body>
  <div id="wrapper">
    <div id="header"> </div>
    <div id="left">
      <div id="logo">
        <h1>Wisdom Hostel</h1>
        <p>We are glad to help!</p>
      </div>
       <div id="news" align="center"> 
      <div class="tab">Links</div>
      <div id="ddsidemenubar" class="markermenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="student.php" >Student</a></li>
<li><a href="#" rel="ddsubmenuside2">Activities</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="download.php" >Downloads</a></li>
<li><a href="gallery.php">Gallery</a></li>    
<li><a href="sponsors.php" >Sponsorship</a></li>
<li><a href="about.php" >About Us</a></li>
<li><a href="contact.php" >Contact Us</a></li>    
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>



<!--HTML for the Drop Down Menus associated with Side Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->


<!--Side Drop Down Menu 2 HTML-->

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a href="pastevent1.php">Past Events</a></li>
<li><a href="upcomingevent.php">Upcoming Events</a></li>
<li><a href="moraltalk.php">Daily Moral Talk</a></li>
</ul>
      </div>      <div id="support">
        
      </div>
    </div>
    
    <div id="right">
      <h2>Welcome to Our Student page</h2>
       
      <div id="welcome">
       <table width="485px" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                 
  <tr class="topicindex" >
    <td class="topicindex" style="background:#FFFFFF; padding-top:1px" height="160px"> <img src="" width="100" height="150"  alt="Mustapha Kobina" />
    </td>
    <td>
    <table width="150px"  height="230px" cellpadding="0" cellspacing="0" class="topicindex" border="0">
  <tr class="topicindex">
    <td nowrap="nowrap" >Mustapha Kobina Abeka</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
      <td nowrap="nowrap">B.PHARM(PHARMACY)</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>YEAR-2</td>
      </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td>0248002880\mustaf.07@hotmail.com</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td></td>
  </tr>
</table>
</td>
    <td valign="top" ><div class="topicindex" style="height:220px;width:150px; overflow: auto;">All praise belong to Allah.May His peace and blessing be on the noble Prophet of Islam,Muhammed(saaw).
The Al-Muntada Students' welfare programme is one I have benefitted form and I continue
to benefit from.It is a very good programme.I express my sincere gratitude by praying
for the blessing of Allah upon the benefactors.I also want to make a passionate appeal
to those who can afford to take up a programme like this and they will not regret.
Thank you.Wassalamu Alaikum.</div></td>
  </tr>
 
</table>
      
      <div id="welcome">
       <table width="485px" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                 
  <tr class="topicindex" >
    <td class="topicindex" style="background:#FFFFFF; padding-top:1px" height="160px"> <img src="" width="100" height="150"  alt="Abdul-Kadiri " />
    </td>
    <td>
    <table width="150px"  height="230px" cellpadding="0" cellspacing="0" class="topicindex" border="0">
  <tr class="topicindex">
    <td nowrap="nowrap" >Abdul-Kadiri  Buniyamin</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
      <td nowrap="nowrap">Bsc.Civil Engineering</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>YEAR-4</td>
      </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td>0243017897\bun86gh@yahoo.com</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td></td>
  </tr>
</table>
</td>
    <td valign="top" ><div class="topicindex" style="height:220px;width:150px; overflow: auto;">Al-Muntada is one of the biggest family i have met so far.I'm really going to miss the place.Long live the foundation.</div></td>
  </tr>
 
</table>
      
      <div id="welcome">
       <table width="485px" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                 
  <tr class="topicindex" >
    <td class="topicindex" style="background:#FFFFFF; padding-top:1px" height="160px"> <img src="" width="100" height="150"  alt="Haruna" />
    </td>
    <td>
    <table width="150px"  height="230px" cellpadding="0" cellspacing="0" class="topicindex" border="0">
  <tr class="topicindex">
    <td nowrap="nowrap" >Haruna Bashiru</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
      <td nowrap="nowrap">Bsc.Agricultural Science</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>YEAR-4</td>
      </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td>0243044207\profbash@yahoo.com</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td></td>
  </tr>
</table>
</td>
    <td valign="top" ><div class="topicindex" style="height:220px;width:150px; overflow: auto;">Whatever you choose to do,please do it very well and Allah will bless you both in this world and the hereafter.</div></td>
  </tr>
 
</table>
                  <table border="0">
        <tr>
          <td>          </td>
          <td>          </td>
          <td>              <a href="/wisdomhostel/student.php?pageNum_rs_student=1&totalRows_rs_student=7"><img src="Next.gif" border="0" /></a>
                        </td>
          <td>              <a href="/wisdomhostel/student.php?pageNum_rs_student=2&totalRows_rs_student=7"><img src="Last.gif" border="0" /></a>
                        </td>
        </tr>
      </table>
      </div>
            <p class="more"><a href="student.php?oldstudent=graduate">view old students</a></p>
             </div>
       </div>
    <div class="clear"> </div>
    <div id="spacer"> </div>
    <div id="footer">
      <div id="copyright">
        Copyright &copy; 2007 Wisdom Hostel All right reserved.      </div>
      <div id="footerline"></div>
    </div>
    </div>
</body>
</html>

**lowcostwebhosti** · 03-31-2009, 09:33 AM

Hi,

I want to say you that i did not check your layout and css manually.

But this types of problems are generally due to margins.

So check your margins and padding area in your CSS.

Because some times we fix the length and width of area and after more content its not working properly and due to this other area disordered.

Thanks
Alex

**LadynRed** · 03-31-2009, 10:20 AM

Have you got a URL where we can see it ?

**kani alavi** · 03-31-2009, 07:23 PM

thanks to all who reply to this message and thanks in advance to those who are yet to reply.
to lowcostwebhosti,appreciate your effort but i am new to css.since you said the problem might have to do with the margins and paddings being fix so setting them dynamic might solve the problem.the problem now is how to set them dynamic.

**kani alavi** · 03-31-2009, 07:45 PM

LadynRed, well i am not having a url yet . i just finished developing the website and i'm trying to insert the real content of the site after which i will host the website then i can have a url.it is during insertion of the real content that i encountered that problem.if there is any other way please help.thank you.

**LadynRed** · 04-01-2009, 11:30 AM

Add overflow:auto to your #wrapper that will clear the floats inside it. You also need to read the stickies about clearing your floats.

You really don't need the position:absolute on #header, you can put that where you need it by floating it.

I would also recommend that you put the #logo INSIDE the #header div. Without being able to see what you're trying to accomplish, this would allow your #left column to sit UNDER the header and logo where you seem to want it to go.