2 replies to this topic

[bbqroast]

Hello!

With my new website I have a news panel, a side bar and a footer all enclosed within the body they are all DIV containers:

<div id='body'>

<div id='news_panel'>

<h2> News </h2></div>

<div id='sidebar'>

Sidebar!

</div>

<br>

<div id='footer'>

<br> <center> New Spawnia Minecraft SMP Server - Owned and Maintained by *** ******* <br>Site designed and coded by *** ******, using PHP V5.3.1 <br>This site is best viewed in W3C compilent browsers such as Firefox and Chrome, IE makes the page look strange</center>	

</div>

</div>

The sidebar is smaller than the news panel and sits on the right, I put the footer in its own DIV so it would all be one block of text at the bottom of the page, this renders fine in IE but in Firefox some of the text appears below the sidebar next to the news panel while the rest appears below the news panel, this only gets worse as the news panel grows vertically until the entire footer is squished below the sidebar.

Ironically the footer claims the site is best viewed in Firefox, instead of IE.

Oh and here is the relevant CSS:

#body	{

	width: 780px;

	margin-left: auto;

	margin-right: auto;

	border-color: #000000;

	border-style: solid;

	border-width: 1px;

	text-align: left;

	padding: 10px;

	margin: 10px;

	background-color: #000000;

	color: #FFFFFF;

}

#news_panel	{

	float: left;

	width: 500;

	margin: 10px;

	padding: 10px;

	border-color: #FFFFFF;

	border-width: 2px;

	border-style: solid;

}

#sidebar	{

	float: right;

	width: 190;

	margin: 10px;

	padding: 10px;

	border-color: #FFFFFF;

	border-width: 2px;

	border-style: solid;

}

#footer	{

	width: 700px;

	text-align: center;

	margin-left: auto;

	margin-right: auto;

	float: center;

	padding: 2px;

	margin: 2px;

}

[bbqroast]

WEIRD!
Ok I have managed to get both IE and Firefox rendering the DIV below the other DIVs by refreshing and restarting but:
Now the body div (in Firefox) is only big enough to hold the background image (I just added the images) and doesn't hold the inner div :(

[bbqroast]

YESH! YEASH!
I am posting this in a new post because it's different.
By floating the body DIV to the left (which didn't change the page as its enclosed within a container DIV) I have fixed the problem!