SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to increase Margin between Content and Footer

    Hi,

    I am trying to increase the margin between my content and footer divs but whether I increase the top margin of the footer or the bottom margin of the content, it doesn't seem to make any difference?

    If someone could point out where I'm going wrong it would be much appreciated!

    The link to the site is http://www.server1519.co.uk and the basic code is pasted below...

    Code:
      <div id="wrapper"> 
        <div id="groupheader"></div> 
        <div id="header"> 
          <div id="toplinks"></div> 
          <!-- end toplinks div --> 
          <div id="tagline"></div> 
          <!-- end tagline div --> 
        </div> 
        <!-- end header div --> 
        <div id="navigation"> </div> 
        <!-- end navigation div --> 
        <div id="breadcrumbs"> </div> 
        <!-- end breadcrumbs div --> 
        <div id="content"> 
          <div id="leftcontent"> 
            <div class="titletab"> 
              <h1></h1> 
            </div> 
            <div class="homeinner"></div> 
          </div> 
          <!-- end leftcontent div --> 
          <div id="rightcontent"> 
            <div class="homeinner"> 
              <h2></h2> 
              <p></p> 
              <div class="divider"></div> 
            </div> 
          </div> 
          <!-- end rightcontent div --> 
          <div id="quicklinks"> 
            <div id="ql1"> 
              <div class="qlheader"></div> 
            </div> 
            <!-- end ql1 div --> 
            <div id="ql2"> 
              <div class="qlheader"></div> 
            </div> 
            <!-- end ql2 div --> 
            <div id="ql3"> 
              <div class="qlheader"></div> 
            </div> 
            <!-- end ql3 div --> 
            <div id="ql4"> 
              <div class="qlheader"></div> 
            </div> 
          </div> 
          <!-- end quicklinks div --> 
        </div> 
        <!-- end content div --> 
        <div id="footer"> </div> 
        <!-- end footer div --> 
      </div> 
      <!-- end wrapper -->
    Code:
    * 
    {
    	 margin: 0;
    	 padding: 0;
    }
    body 
    {
    	margin-top: 10px;
    	font: 0.8em "Trebuchet MS", sans-serif, helvetica;
    	text-align: center;
    	background: #fff url('../media/90/falconbg.jpg') top no-repeat;
    	background-attachment: fixed;	
    }
    img 
    {
    	border: 0;
    }
    a:link, a:active, a:visited
    {  
    	color: #495561;
    	text-decoration: none;
    }  
    a:hover 
    {
    	text-decoration: underline;
    }
    h1, h2, h3 
    {
    	margin: 0;
    	padding: 0;
    }  
    h1 
    {  
    	font-size: 1.6em;
    	color: #fff;
    	letter-spacing: 0.1em;
    } 
    h2 
    {  
    	font-size: 1.6em;
    	color: #88abc9;
    	letter-spacing: 0.1em;
    	font-weight: normal;
    } 
    h3 
    {
    	margin-top: 15px;
    	font-size: 1em;
    	font-weight: bold;
    }
    p 
    {
    	padding-top: 3px;
    }  
    #wrapper 
    {
    	margin: 0 auto;
    	width: 990px;
    	text-align: left;
    }
    #groupheader 
    {
    	text-align: right;
    	padding-bottom: 10px;
    }
    #header {  
    	height: 96px;
    	background: #fff url('../media/100/topbanner.jpg') no-repeat top left;
    }  
    #header li a:hover 
    { 
    }  
    #logo 
    {
    }
    #toplinks 
    {
    	color: #fff;
    	font-size: 10px;
    	margin: 10px 15px 0 0;
    	text-align: right;
    }
    #toplinks a:link, a:active, a:visited
    {
    	color: #fff;
    	text-decoration: none;
    }
    #toplinks a:hover
    {
    	color: #1c293a;
    	text-decoration: none;
    }
    #tagline 
    {
    	color: #fff;
    	font-size: 16px;
    	text-align: right;
    	margin: 30px 15px 0 0;
    }
    
    #navigation {
    	float: left;
    	width: 990px;
    	color: #333;
    	margin: 0;
    }
    
    #breadcrumbs 
    {
    	clear: both;
    	float: left;
    	width: 600px;
    	margin: 15px 0 0 9px;
    	font-size: 0.9em;
    	color: #495561;
    }
    
    #breadcrumbs a:link, a:visited
    {
    	text-decoration: none;
    	color: #495561;
    }
    
    #breadcrumbs a:hover, a:active
    {
    	text-decoration: underline;
    	color: #495561;
    }
    
    #content 
    {
    	clear: both;
    	margin: 7px 0 25px 0;
    	position: relative;
    }
    #leftcontent { 
    	color: #333;
    	margin: 0 5px 5px 0;
    	padding: 10px;
    	/* height: 350px; */
    	width: 690px;
    	float: left;
    }
    #leftcontent .titletab 
    {
    	float: left;
    	width: 400px;
    	background: #88abc9;
    	padding: 3px 2px 2px 5px;
    }
    #leftcontent .productinner 
    {
    	clear: both;
    	float: left;
    	width: 660px;
    	height: auto;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	padding: 15px;
    	text-align: justify;
    }
    
    #leftcontent .productinner img 
    {
    	float: left;	
    }
    #leftcontent .productinner ul
    {
    	float: left;
    	list-style: none;	
    }
    
    #leftcontent .productinner ul li
    {
    	width: 250px;
    	background: #1c293a;
    	color: #fff;
    	font-weight: bold;
    	padding: 4px 4px 5px 6px;
    	margin-top: 5px;
    }
    #leftcontent .productinner ul li a
    {
    	color: #fff;
    	text-decoration: none;
    }
    #leftcontent .inner 
    {
    	clear: both;
    	float: left;
    	width: 660px;
    	height: auto;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	padding: 15px;
    	text-align: justify;
    }
    
    #leftcontent .inner img 
    {
    	float: left;	
    }
    #leftcontent .inner ul
    {
    	float: left;
    	list-style: none;	
    }
    
    #leftcontent .inner ul li
    {
    	width: 250px;
    	background: #1c293a;
    	color: #fff;
    	font-weight: bold;
    	padding: 4px 4px 5px 6px;
    	margin-top: 5px;
    }
    #leftcontent .inner ul li a
    {
    	color: #fff;
    	text-decoration: none;
    }
    #rightcontent { 
    	float: right;
    	color: #333;
    	margin: 0 0 5px 0;
    	padding: 10px;
    	/* height: 350px; */
    	width: 253px;
    	height: 100%;
    	display: inline;
    	/* background: #666666; */
    }
    #leftcontent .homeinner 
    {
    	clear: both;
    	width: 690px;
    	border: 1px solid #88abc9;
    	background: #ffffff;		
    }
    #rightcontent .homeinner 
    {
    	padding: 40px 0 0 0;
    	line-height: 1.5em;	
    }
    #rightcontent .homeinner img 
    {
    	float: right;
    }
    #rightcontent .homeinner ul
    {
    	line-height: 1.4em;
    	list-style: none;
    }
    #rightcontent .homeinner ul a:link, a:active, a:visited
    {
    	color: #747d86;
    	text-decoration: none;
    }
    #rightcontent .homeinner ul a:hover
    {
    	text-decoration: underline;
    }
    #rightcontent .options
    {
    	padding: 31px 0 0 0;
    }
    #rightcontent .options .box
    {
    	width: 253px;
    	height: 52px;
    	border: 1px solid #88abc9;
    	background: #ffffff;
    	margin-bottom: 10px;
    }
    
    #rightcontent .quicklinks
    {
    	position: absolute;
    	bottom: 0;
    }
    #rightcontent .divider 
    {
    	clear: both;
    	margin: 10px 0 10px 0;
    	border-bottom: 1px dashed #000;
    }
    #quicklinks { 
    	clear: both;
    	margin: 25px 0 5px 0;
    	color: #fff;
    	padding: 5px 0 0 25px;
    }
    
    #quicklinks a { 
    	color: #ffffff;
    }
    
    #ql1 
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin: 0 5px 10px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/32/ql1.jpg') no-repeat top left;
    }
    
    #ql2
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin-right: 5px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/37/ql2.jpg') no-repeat top left;
    	
    }
    
    #ql3
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	margin-right: 5px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/42/ql3.jpg') no-repeat top left;
    }
    
    #ql4
    {
    	float: left;
    	width: 222px;
    	height: 130px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/47/ql4.jpg') no-repeat top left;
    }
    .qlheader 
    {
    	padding: 0 2px 2px 5px;
    	font-size: 12px;
    }
    
    
    #rightquicklinks  
    {
    	clear: both;
    	display: block;
    	vertical-align: bottom;
    }
    
    
    #rightql1 
    {
    	clear: both;
    	float: left;
    	width: 120px;
    	height: 100px;
    	margin: 0 13px -5px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/63/ql1.jpg') no-repeat top left;
    }
    
    #rightql2
    {
    	float: left;
    	width: 120px;
    	height: 120px;
    	margin: 0 0 -5px 0;
    	/* border: 1px solid #747D86; */
    	background: url('../media/68/ql2.jpg') no-repeat top left;
    	
    }
    
    #rightql3
    {
    	clear: both;
    	float: left;
    	width: 120px;
    	height: 100px;
    	margin-right: 13px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/73/ql3.jpg') no-repeat top left;
    }
    
    #rightql4
    {
    	float: left;
    	width: 120px;
    	height: 100px;
    	/* border: 1px solid #747D86; */
    	background: url('../media/78/ql4.jpg') no-repeat top left;
    }
    .rightqlheader 
    {
    	padding: 2px 2px 3px 5px;
    	font-size: 12px;
    	color: #fff;
    }
    .rightqlheader a:link, a:active, a:visited, a:hover
    {
    	color: #fff;
    	text-decoration: none;
    }
    #footer   
    {
    	clear: both;
    	padding: 2px;
    	font-size: 0.8em;  
    	border-top: 1px solid #88abc9;
    	color: #747D86;
    	text-align: right;
    }  
    #footer a:link, a:active, a:visited 
    {  
    }      
    #footer p 
    {  
    	padding: 24px;  
    }  
    .clear 
    {  
    	clear: both;  
    }
    Thanks, Rachel

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, padding instead of margin on the content should do it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for yoy reply but unfortunately replacing margin with padding hasn't worked!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, since the inners of #content are floated, the #content div has collapsed in height, try giving it overflow:hidden; and that should do the trick (untested)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thanks!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •