SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content overhangs bottom of container

    Hi,

    I have an index page with a wrpper using the sliding doors technique. within that I have 2 divs called mainContent and secondaryNav.

    I use php to populate the mainContent. when I put the content it overhangs the wrapper by about 10 px on each page whatever the amount of content is placed withion mainContent.

    Can any one tell me how I can sort this?

    It can be seen at:http://www.alphatest.co.uk

    Css code is as follows:

    Code:
    body{
    margin:0;
    padding:0;
    /*background:url(c2_images/corp2_back.gif) repeat-x;*/
    background:#ccffff;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #wrapper{
    width:90%;
    max-width:1100px;
    margin:2% auto;
    background: #ccffff; /*this used to be e5e5e5 */
    
    }
    
    .wrapper{
    width:100%;
    background-color:#cccccc;
    background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
    }
    
    .wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
    }
    
    .wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
    }
    
    
    #header{
    width:98%;
    height:22%;
    background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
    overflow:hidden;
    padding-top:2%;
    margin-left:1.9%;
    margin-bottom:2%;
    }
    
    #header img{overflow:hidden;}
    #logocover{float:left; }
    #logohead{float:left; width:31%; margin-left:2%; padding:7px; height:22%;}
    #logohead h1{color:#993333; font-family:Arial, Helvetica, sans-serif;}
    #logopic{float:right; margin-right:1.3%;   }
    
    #mainNav{
    float:left;
    width:16%;
    background-color: #0099CC;
    margin-left:4%;
    margin-top:2%;
    }
    
    
    #mainNav li{list-style:none; color:#FFFFFF; }
    
    #mainNav  ul{
    margin:0;
    padding:0;
    list-style: none;
    }
    
    #mainNav ul a:link, #mainNav ul a:visited  {
    display:block;
    text-decoration:none;
    text-indent:25px;
    width:120px;
    height:39px;
    border:#0099cc;
    line-height:39px;
    color: #ffffff;
    background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
    }
    #mainNav ul a:hover, #mainNav ul a:active  {
    color: #FFFF00;
    background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
    border:#0099cc;
    }
    
    
    #content{
    float:left;
    width:76%;
    background-color:#ffffff;
    margin-right:4%;
    margin-top:2%;
    }
    #content h2{color:#333333; text-align:center;}
    
    #mainContent{
    float:left;
    width:59%;
    background-color:#996600;
    padding-top:30px;
    padding-left:3%;
    padding-right:3%;
    
    }
    
    #secondaryNav{
    float:right;
    margin:auto 0;
    width:29%;
    padding-right:1%;
    background-color:#FFFFff;
    
    }
    
    #latestnews{
    float:left;
    max-height:300px;
    max-width:170px;
    min-width:170px;
    /*margin:15px 0 0 0;
    padding: 5px 0 5px 0; */
    
    }
    
    .latestnews{
    width:100%; background:url(c2_images/sidebox_bl.gif) no-repeat left bottom;}
    
    .ln_outer{background:url(c2_images/sidebox_br.gif) no-repeat right bottom;}
    
    .ln_inner {
    background:url(c2_images/sidebox_tl.gif) no-repeat left top; padding-left:10px;}
    
    
    
    #latestnews h3{
    background:url(c2_images/sidebox_tr.gif)  no-repeat right top; text-align:center; padding-top:13px; padding-bottom:10px; color:#993333;}
    #latestnews p{width:145px;  font-size:12px; padding-left:8px; padding-right:8px; padding-bottom:15px;  color:#666666;}
    
    #footer{
    clear:both;
    padding:4px;
    background-color: #999999;
    height:40px;
    }
    #footer p{font-size:10px; color:#FFFFFF; line-height:10px;}
    
    
    #footer a:link, #footer a:visited  {
    display:inline;
    line-height:10px;
    text-decoration:none;
    color: #ffffff;
    font-size:10px;
    background:none;
    }
    #footer  a:hover, #footer a:active  {
    display:inline;
    line-height:10px;
    color: #FFFF00;
    font-size:10px;
    background:none;
    }
    thanks for your help

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Your background images include part of the blue body background, so you need to push the content up a bit to account for this.

    Try adding something like this:

    Code:
    #content{
        margin-bottom: 20px;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Your background images include part of the blue body background, so you need to push the content up a bit to account for this.

    Try adding something like this:

    Code:
    #content{
        margin-bottom: 20px;
    }
    thanks ralph.m It seems so simple but after doing all the divs for the sliding doors stuff i was getting truly lost.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •