FF 3rd column height issue

[Luce]

Hi

I am coding a new design and this is what I have so far: http://www.ukdrn.org/new/index_new.html

It looks fine in IE7 but in FF the right hand column is longer than the content and overflows into the background colour.

Any advice on how to fix this would be greatly appreciated.

Here is my CSS

/*tags*/
body{
	margin:0;
	padding:0;
	font-family:Tahoma;
	background-color:#AD926B;
	text-align:center;
	font-size:62.5%; /* Explain @ www.clagnut.com/blog/348/ */
}
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
img a:link, a:visited{
	text-decoration:none;
}
h1 {
	color: #766143;
	font-size: 1.9em;
	font-weight: normal;
}
h2{
	color: #993300;
	font-size:1.7em;
	font-weight: normal;
}
h3{
	color: #666666;
	font-size:1.25em ;
	font-weight: normal;
}
blockquote {
	color: #766143;
	font-weight: bold;
}
form{
	display:inline;
}

/*div ids*/
#container{
	text-align:left;
	width:950px;
	margin-right:auto;
	margin-left:auto;
	background-color:#FFFFFF;
	margin-top: 30px;
	padding-bottom: 20px;
}
#header{
	height:187;
	margin-bottom: 10px;
}
#content{
	margin:0 225px;
	width:490px;
	font-size: 1.2em;
	color: #333333;
}
#sidebar_left{
	float:left;
	width:200px;
	top:187px;
	left:30px;
	margin-left: 10px;
	background-image: url(../images/nav_border.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding-right: 20px;
}
#sidebar_left #links p {
	font-weight: normal;
	font-size: 1.2em;
	color: #333333;
}
#sidebar_left #links {
	border: 1px solid #CCCCCC;
	background-color: #EFE1C0;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}
#sidebar_left #leftnav a {
	color: #333333;
	text-decoration: none;
}
#sidebar_left #leftnav a:hover{
	color: #cc0000;
	text-decoration: none;
	font-weight: bold;
}
#sidebar_left #leftnav li {
	font-family: Tahoma;
	font-family: Tahoma;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	padding-left: 0px;
	font-weight: 500;
	font-size: 1.55em;
}
#sidebar_left #leftnav ul {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}
#sidebar_left #links h3 {
	font-size: 1.6em;
	font-weight: bold;
}
#sidebar_left #links h4 {
	font-size: 1.4em;
	font-weight: bold;
	color: #666666;
}
#sidebar_left #links li {
	list-style-type: none;
	padding-bottom: 20px;
	font-size: 1.2em;
}
#sidebar_left #links ul {
	padding-left: 0px;
}
#sidebar_right{
	float:right;
	width:200px;
	top:187px;
	right:30px;
	margin-right: 10px;
	font-size: 1.2em;
	background-image: url(../images/nav_border.gif);
	background-repeat: repeat-y;
	background-position: left;
	padding-left:20px;
}
#sidebar_right img {
	float: left;
}
#sidebar_right h2 {
	color: #FFFFFF;
	background-color: #cc0000;
}
#sidebar_right p {
	padding-left: 10px;
}
#sidebar_right li {
	list-style-type: none;
	padding-bottom: 20px;
}
#sidebar_right ul {
	padding-left: 10px;
	margin-left: 0px;
}
#footer{
	clear:both;
	padding: 20px 35px;
}#footer ul {
	list-style-image: none;
	list-style-type: none;
	text-align: right;
	width: 300px;
	float: right;
	margin-top: 0px;
}
#footer ul li {
	display: inline;
	text-align: right;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.1em;
}
#footer p {
	color: #FFFFFF;
	font-size: 1.1em;
	float: left;
	margin-top: 0px;
}
#footer a {
	color: #FFFFFF;
	text-decoration: none;
}
#container #topnav {
	margin-right: 10px;
	margin-left: 10px;
	font-size: 1.6em;
}
#container #topnav ul {
	list-style-image: none;
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 5px;
}
#container #topnav li {
	font-weight: normal;
	display: inline;
	padding-right: 15px;
}
#container #topnav li a {
	color: #FFFFFF;
	text-decoration: none;
	padding-right: 10px;
	padding-left: 10px;
}
#container #header #topnav a:hover {
	font-weight: bold;
}
#search {
	float: right;
	margin: 0px;
}
#controls {
	margin-bottom: 20px;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #cc0000;
	padding-bottom: 30px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
#controls p {
	color: #cc0000;
	margin: 0px;
	padding: 10px 10px 0px;
	font-weight: bold;
}
#controls li {
	display: inline;
}
#controls ul {
	margin-top: 5px;
}
#intro{
	padding-bottom: 30px;
	padding-right: 10px;
	padding-left: 10px;
	background-image: url(../images/drop_shadow.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	margin-right: 5px;
	margin-left: 5px;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #cc0000;
	margin-top: 0px;
	padding-top: 0px;
}
#intro h1 {
	margin-top: 5px;
}

#intro_shadow{
	background-image: url(../images/shadow_side.gif);
	background-repeat: repeat-y;
}

/*classes*/
.section {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	padding-bottom: 5px;
}
.sidebar_icon {
	float: left;
}
.sideheader {
	background-color: #cc0000;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	height: 55px;
}
.btn {
	background-color: #AD926B;
	color: #FFFFFF;
	font-weight: bold;
}
.register {
	color: #FFFFFF;
	background-color: #cc0000;
	font-weight: bold;
}
.curvebox{
	padding:5px;
	background-color:#cc0000;
	color:#ffffff;
}
.curvebox img {
	padding-right: 10px;
	padding-left: 5px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

[Paul O'B]

Hi,

Have you cleared the floated content

Floats are removed from the flow and are not contained by their parents. If youwant a parent to encompass its floated children you need to use a clearing mechanism.

A quick fix is to use overflow other than visible to auto clear floats.

#container{
    text-align:left;
    width:950px;
    margin-right:auto;
    margin-left:auto;
    background-color:#FFFFFF;
    margin-top: 30px;
    padding-bottom: 20px;
overflow:hidden
}

This can have consequences in some situations so read the faq on floats for more ways of clearing floats

[Erik J]

The #container needs to clear the floats inside.

There are three methods:

Clear by overflow:

#container{
	text-align:left;
	width:950px;
	margin-right:auto;
	margin-left:auto;
	background-color:#FFFFFF;
	margin-top: 30px;
	padding-bottom: 20px;
	overflow: hidden; /* hidden or auto or scroll, default is visible */
}

Clear with a clearfix class:

.clearfix:after {
  display: block;
  clear: both;
  height: 0;
  content: ".";
  visibility: hidden;
}

<div id="container" class="clearfix"></div>

Put a clearing element last inside the #container:

...
<br style="clear:both" />

[Luce]

Thanks both, i have not come across this before. I have used the 'overflow' option and it appears to do the trick, but i will read up on the faqs.

Many thanks for your help :-)

[Paul O'B]

As I mentioned above this is the default behavior of floats and if you are using floats then you need to understand this in detail. There is another good article here that explains how this works.