--ss--
01-02-2008, 08:51 PM
Well I haven't done coding in a while so I thought i'd restart , anyway for most of the layouts I coded they were usually basic layouts which used a basic structure of having a banner with the nav attached to it and a content section underneath. The point is i've never coded a fully expandable 2/3 column layout before so I decided to give it a shot.
The problem i'm having is that I put all the content into a 'container' then I applied float tags to inside this 'container'.
Seeing as I used float tags the content got pushed out of the container and now I no longer have the background colour the divs should have behind them.
How do I put it all back into the container div without removing the float tags?
URL: http://www.shanes.sawhosting.com/hhgs/layout.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="Habbo,layout" />
<meta name="Description" content="Layout" />
<title>Layout</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg_blue.gif);
text-align: center;
}
#container {
margin: auto;
width: 740px;
text-align: center;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#banner {
background-image: url(images/banner.PNG);
height: 140px;
}
#top {
height: 19px;
background-image: url(images/top.PNG);
font-color: Black;
font-family: Verdana;
font-size: 12px;
font-weight: normal;
padding-top: 5px;
}
#content {
width: 740px;
margin: auto;
background-color: #ffffff;
font-color: Black;
font-family: Verdana;
font-size: 12px;
font-weight: normal;
}
#left {
float: left;
}
#right {
float: right;
}
#main {
width: 540px;
text-align: left;
}
#nav {
width: 200px;
text-align: left;
}
#disc {
width: 740px;
text-align: center;
float: right;
font-color: Black;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="top">1</div>
</div>
<div id ="content">
<span id="left">
<div id="nav">
<!--Navigation-->
<?php include ("nav.txt")?>
<!--End Navigation-->
</div>
</span>
<span id="right">
<div id ="main">
<!--Main Content-->
<?php include ("main.txt")?>
<!--End Content-->
</div>
</span>
</div>
<!--Disclaimer-->
<div id="disc">
<?php include ("disclaimer.txt")?>
</div>
<!--End Disclaimer-->
</body>
</html>
Also while i'm asking for help , What colour should I change the top gradient bar too?
The problem i'm having is that I put all the content into a 'container' then I applied float tags to inside this 'container'.
Seeing as I used float tags the content got pushed out of the container and now I no longer have the background colour the divs should have behind them.
How do I put it all back into the container div without removing the float tags?
URL: http://www.shanes.sawhosting.com/hhgs/layout.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="Habbo,layout" />
<meta name="Description" content="Layout" />
<title>Layout</title>
<style type="text/css">
<!--
body {
background-image: url(images/bg_blue.gif);
text-align: center;
}
#container {
margin: auto;
width: 740px;
text-align: center;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#banner {
background-image: url(images/banner.PNG);
height: 140px;
}
#top {
height: 19px;
background-image: url(images/top.PNG);
font-color: Black;
font-family: Verdana;
font-size: 12px;
font-weight: normal;
padding-top: 5px;
}
#content {
width: 740px;
margin: auto;
background-color: #ffffff;
font-color: Black;
font-family: Verdana;
font-size: 12px;
font-weight: normal;
}
#left {
float: left;
}
#right {
float: right;
}
#main {
width: 540px;
text-align: left;
}
#nav {
width: 200px;
text-align: left;
}
#disc {
width: 740px;
text-align: center;
float: right;
font-color: Black;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="top">1</div>
</div>
<div id ="content">
<span id="left">
<div id="nav">
<!--Navigation-->
<?php include ("nav.txt")?>
<!--End Navigation-->
</div>
</span>
<span id="right">
<div id ="main">
<!--Main Content-->
<?php include ("main.txt")?>
<!--End Content-->
</div>
</span>
</div>
<!--Disclaimer-->
<div id="disc">
<?php include ("disclaimer.txt")?>
</div>
<!--End Disclaimer-->
</body>
</html>
Also while i'm asking for help , What colour should I change the top gradient bar too?