A bit rusty

Hey guys I’m new here. I’m recently started learning wordpress and purchased a pre-made theme to customize instead of starting from scratch. I haven’t made a website in a few years and am a bit rusty in my CSS knowledge. So I have a CSS noob question…

I just started editing this template http://cmiddlaw.com.s50556.gridserver.com/ and was wondering about the two bottom footers. The grey div at the bottom is the footer, and the darker div under that is the copyright.

I want the background (colors) of both divs to stretch across the page horizontally, yet the content needs to flow in the middle. How do I do this? The background-repeat tag isn’t helping me, I’m assuming I need to edit the main container tag as well?

Also how do I get rid of the 15-20px of blank space at the bottom of the page?

Thank you, I look forward to learning more and helping others if I can,

Taylor

Hi,

The gap at the bottom can be removed by changing the margin-bottom to zero here:


#side{margin-bottom:0}

You can’t make the footers background extend without changing the html (or without changing the css for all the elements which would be awkward to manage). You’d need to move the two footer divs so that they are outside of the #center container and can therefore stretch to 100%.

Then you would need to make sure that the outer of each of those footer elements is 100% wide and the inner element is 980px width and centred with auto margins.

e.g.This is a rough example of the format you would need to follow:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#footer, #footer2 {
	width:100%;
	min-width:980px;
	background:red;
	min-height:60px;
}
#footer2 { background:blue }
.inner {
	width:980px;
	margin:auto;
}
</style>
</head>

<body>
<div id="footer">
		<div class="inner">Test</div>
</div>
<div id="footer2">
		<div class="inner">Test</div>
</div>
</body>
</html>