Hello
I'm hoping someone can help me where I'm going wrong.
I'm updating my website as the code is old and uses table rather than css. I have created a Template but the problem I'm having is the Background colours on the containers either side of the Main Content does not extend the full length; it only extends as far as the Text within the container. How can I correct this so the background on these sidebars extends the full length as the Main Content container will vary in length. The code is as follows
HTML
CSS
I'm hoping someone can help me where I'm going wrong.
I'm updating my website as the code is old and uses table rather than css. I have created a Template but the problem I'm having is the Background colours on the containers either side of the Main Content does not extend the full length; it only extends as far as the Text within the container. How can I correct this so the background on these sidebars extends the full length as the Main Content container will vary in length. The code is as follows
HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div id="wrapper">
<div id="topmenu">
<p>This is the Header</p>
</div>
<div id="teambar">
<p>This is the Team Bar</p>
</div>
<div id="logo">
<p>Left Logo</p>
</div>
<div id="title">
<p>Website Title bar</p>
</div>
<div id="logo">
<p>Right Logo</p>
</div>
<div id="leftmenu">
<p>Left Hand Menu</p>
</div>
<div id="content">
<p>Main Content of Text</p><p>This is the area where I will display the main content of the website. </p><p>Results, Tables, Cup News, Individual Competition details will appear here. </p><p>The colour of the two sidebars need to extend so that all three are full length colour. </p>
</div>
<div id="rightfixtures">
<p>This is where Todays Fixtures will be displayed.</p>
</div>
<div id="leftfooter">
<p>Left Hand Footer</p>
</div>
<div id="centerfooter">
<p>Centre Footer</p>
</div>
<div id="rightfooter">
<p>Right Hand Footer</p>
</div>
</div>
</body>
</html>
CSS
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 1179px;
}
#topmenu {
height: 30px;
width: 1179px;
background: #5678BB;
float: left;
border-radius: 10px 10px 0px 0px;
text-align: center;
}
#title {
background: #33CCFF;
width: 799px;
height: 70px;
float: left;
text-align: center;
}
#teambar {
background: #33CCFF;
width: 200px;
height: 70px;
float: left;
text-align: center;
}
#logo {
background: #CC33FF;
width: 90px;
height: 70px;
float: left;
text-align: center;
}
#content {
background: #D7DBE3;
width: 700px;
float: left;
line-height: 1.15;
}
#leftmenu {
background-color: #5678BB;
width: 200px;
float: left;
text-align: center;
}
#rightfixtures {
background-color: #FFFFC0;
width: 279px;
float: left;
text-align: center;
}
#leftfooter {
background: #CC33FF;
width: 393px;
height: 40px;
float: left;
text-align: center;
border-radius: 0px 0px 0px 10px;
}
#centerfooter {
background: #33CCFF;
width: 393px;
height: 40px;
float: left;
text-align: center;
}
#rightfooter {
background: #CC33FF;
width: 393px;
height: 40px;
float: left;
text-align: center;
border-radius: 0px 0px 10px 0px;
}
Last edited by a moderator: