Trying to increase Margin between Content and Footer

HTML & CSS
1

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…


  <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 --> 



* 
{
	 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

Hi, padding instead of margin on the content should do it.

3

Hi, thanks for yoy reply but unfortunately replacing margin with padding hasn’t worked!

4

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)

5

Perfect, thanks!

6

You’re welcome :slight_smile: