css layout help

[Sp00n]

http://tai.sp00ny.co.uk/test/index.htm

The content div wraps fine in IE but it doesnt in firefox, does anyone know how to sort it out?

css:

#content {
		background:#fff;
		   width:730px;
		   margin:0 auto 0;
		   border:0px solid #fff;
		   position:relative;
		   padding: 10px;
		   }

height:100%; or in px doesnt seem to make any difference :/

 

[MagSafe]

try putting in clear: both; into one of the overlapping div's in your css

 

[Sherbs]

#content {
		background:#fff;
   		width:730px;
   		margin:0 auto 0;
   		border:0px solid #fff;
   		position:relative;
   		padding: 10px;
   		min-height; 200px;
                overflow: auto;
   		}

 

[Augmented]

Simplest solution is to give #content the property overflow: auto; to make it expand in relation to the dimensions of the floated content. Firefox is acting correctly here, as floated elements are removed from the document flow.

Otherwise place something at the bottom of the content div, after the two inner <div>s, and give it a clear: both;.

/edit - oo, pipped to the post

 

[Sherbs]

Wow, I beat Augmented.

A great day for me.

 

[Sp00n]

I love you guys

 

[Sherbs]

Feelings mutual x

 

[Sp00n]

Now in firefox, the home page and the about page jump from side to side, what have i missed?

My stylesheet

/* p 		{
		padding: 0;
		margin: 0
		}
*/

#header {
		background:#fff;
		   width:750px;
		   margin:2px auto 0;
		   position:relative; 
		   } 
body 	{ text-align: center; }

/* #menu	{
		padding: 10px;
		margin: 10px
		}
*/
		
		
#content {
		background:#fff;
		   width:730px;
		   margin:0 auto 0;
		   border:0px solid #fff;
		   position:relative;
		   padding: 10px;
		   min-height; 200px;
		   overflow: auto;
		   }
			
body 	{
		background-image: url(bg_tile.jpg);
		/* margin:5; */
		text-align: left;
		}

.style1 {
		font-family: Verdana;
		font-size: 10px;
		color: #FFFFFF;
		}
		
.style2 {
		font-family: Verdana;
		font-size: 10px;
		color: #545454;
		text-align: left
		}

.class1	a:link {color: #545454}
.class1 a:visited {color: #545454}
.class1 a:hover {color: #fff}
.class1 a:active {color: #fff}

 

[Augmented]

The browser's scrollbar. Fx only displays it when it needs to.

I win!

 

[Sherbs]

Lol Augmented.

 

[Flanders]

Is there any reason why you have commented out your paragraph and #menu styling?

Also, in your body style, you need to assign a unit to the margin (eg. px/em).

I think the "jumping" is the scroll bar.

EDIT:

Serves me right for not refreshing before posting.

 

[Sp00n]

Yea i was just doing some testing, worked better without the styling. I've set the margin to 0.

Can i force ff to show the scrollbar?

/edit done it, added html { min-height: 100%; margin-bottom: 1px; } to the style sheet