Need some CSS help

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

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

RYANNNNN · 02-02-2008, 09:42 AM

Hey

I don't usually work with other peoples CSS because everyone has different coding techniques.

But check out: http://www.habboxforum.com/showthread.php?t=450914

It's basically the structure of your layout but much simple and cleaner. It should help you out.

RichardKnox · 02-02-2008, 12:18 PM

Add overflow: hidden; to the content div

**--ss--** · 02-02-2008, 01:12 PM

Originally Posted by RYANNNNN

Hey

I don't usually work with other peoples CSS because everyone has different coding techniques.

But check out: http://www.habboxforum.com/showthread.php?t=450914

It's basically the structure of your layout but much simple and cleaner. It should help you out.

Hey , that's the type of layout I normally code and i'm quite confiedent coding like that , it's just I was having diffuclties expanding it and making it more complex

I've moved that thread to the guides section for you , Well done!

Originally Posted by RichardKnox

Add overflow: hidden; to the content div

Ah that's what I was forgetting , Thanks

Thread: Need some CSS help

Thread Tools

Need some CSS help

Posting Permissions