SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position: relative Creating Gap at Bottom of Layout

    the div#rightColNoneHome is position: relative with a value top:-105px.

    This obvisuly creates a gap at the bottom of this div of 105px which creates a large white space between the content and the footer. I was wondering if anybody could advise how to get around this problem?


    Thanks.

    http://www.creativebubbles.co.uk/ukwsl/services.html

    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.75em;
    	color: #000;
    	background-color: #fff;
    	margin: 0;
    	padding: 0;
    	text-align:center;
    }
    
    img {
    border:none;
    margin:0;
    padding:0;
    }
    
    strong {color:#0c7e0c; font-weight:bold;}
    h1 {font:1.2em Arial, Helvetica, sans-serif; color:#0c7e0c; font-weight:bold; margin:8px 0 5px 0; padding:0;}
    h2 {font:1.4em Arial, Helvetica, sans-serif; color:#0c7e0c; font-weight:bold; margin:8px 0 5px 0; padding:0;}
    p {font:1em Arial, Helvetica, sans-serif; margin:8px 0 8px 0;}
    
    	
    #maincontainer {
    margin: 0px auto;
    text-align: left;
    width: 911px;
    background:#fff;
    
    }
    
    a {color:#0c7e0c; text-decoration:underline;}
    a:hover {color:#9ed98b; text-decoration:underline;}
    
    #header {width:911px; float:left;}
    
    #logo {width:300px;float:left; padding: 0 330px 0 0;}
    
    #quickLinks {padding:0 0 0 300px;}
    #quickLinks ul { margin: 55px 0 0 0px; list-style:none;}
    #quickLinks li { float:left; padding: 0 18px 0 0px; font:1.0em Arial, Helvetica, sans-serif; }
    #quickLinks a {color:#0c7e0c; text-decoration:none;}
    #quickLinks a:hover {color:#9ed98b; text-decoration:none;}
    
    
    #navigationBackground {width:911px; margin:0; padding:0;}
    #leftBanner {width:618px; float:left; margin:0; padding:0;}
    #rightBanner {float:right; margin:0; padding:0; background:url('../images/home/banner-section-2.gif') no-repeat; height:332px; width:293px;}
    
    #home-image {float:left; background:url('../images/home/banner-section-1.gif') no-repeat; margin:0; padding:0; width:618px; height:332px;}
    #menu {margin:0 0 0 0px; padding:305px 0 0px 0; width:618px; float:left; }
    #menu ul {list-style:none; padding:0 0 0 5px; margin:0;}
    #menu li {float:left; margin:0 0px 0 0; padding:0 15px 0 15px; }
    .border { border-left:dotted 1px #fff;}
    #menu a { font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; font-weight:bold;}
    #menu a:hover{ font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:underline; font-weight:bold;}
    
    
    #bottom {float:left; width:911px; margin:0; padding:0;}
    
    #content {width:615px; float:left; padding:10px 0 10px 0; margin:0;}
    
    #leftContent {width:285px; float:left; text-align:justify;}
    #split {float:left; width:10px; padding:0 0 0 10px;}
    #rightContent {width:295px; float:right; text-align:justify; padding:0 10px 0 10px; border-left:dotted 1px #999999;}
    
    #rightCol {position:relative; width:290px; margin:-75px 0 0 0; overflow:hidden; top:0; left:615px;}
    *html div#rightCol {position:relative; width:290px; margin:-75px 0 0 0; overflow:hidden; top:0; left:0px;}
    
    #rightColNoneHome {position:relative; width:290px; margin:0px 0 0 0; overflow:hidden; top:-105px; left:2px;}
    *html div#rightColNoneHome {position:relative; width:290px; margin:0px 0 0 0; overflow:hidden; top:-125px; left:2px;}
    
    #newsheader {margin:10px 0 0 0; padding:0;}
    
    #footer {float:left; border-top: 3px solid #7fbb7f; width:911px; padding:5px 0 0 0;}
    
    #copyright {float:left; width:300px; font:0.9em Arial, Helvetica, sans-serif; color:#949494; padding:0 320px 0 0;}
    
    #tools a { color:#949494; text-decoration:none;}
    #tools a:hover {color:#333333; text-decoration:none;}
    #tools ul {list-style:none; margin:0 0 0 0px; font:0.9em Arial, Helvetica, sans-serif;  }
    #tools li {float:left; padding:0 0px 0px 10px;}
    
    #news {background:url('../images/site/newsroom-background.gif') no-repeat; padding:5px 0px 2px 5px; width:283px; height:229px; margin:0;}
    #news a {color:#FFFFFF; text-decoration:none; font-weight:bold;}
    #news a:hover {color:#FFFFFF; text-decoration:underline; font-weight:bold;}
    
    .newsStory {margin:0 0 10px 0;}
    
    .newsHeadline {font:1.1em Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; margin:5px 0 5px 0;}
    
    .newsSummary {font:1.0em Arial, Helvetica, sans-serif; color:#FFFFFF; margin:0;}
    
    .date{font:0.8em Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; margin:2px 0 0 0;}
    
    #subNav {background:url('../images/site/sub-nav-background.gif') no-repeat; width:618px; margin:0px 0 0 78px; padding:0px 0 30px 0; font:0.9em Arial, Helvetica, sans-serif;}
    #subNav ul {list-style:none; margin:0; padding:0 0 0 14px;}
    #subNav li {float:left; padding:7px 10px 0 0px; margin:0;}
    #subNav a { color:#fff; text-decoration:none;}
    #subNav a:hover {color:#fff; text-decoration:underline;}
    
    #maincontent {float:left; width:598px; padding:0 15px 0 0; text-align:justify; margin:0;}

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    position: relative leaves a footprint.
    remove that and and make it margin-top:-105px;

    Negative margin's drag around the blocks in a similar way but don't leave anything behind.


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
  •