asked on

Different browser behaviour for floating property

Hello,

see the code I attached. I do have a site with a header, a center and a footer. The background of the center is green. Within the center I do have two boxes: contentleft and contentright. The content of the center is flexibel, so I don't want to define a height in my stylesheet. If I view this site in IE7, I see that the height of the center part automatically is set defined by the text within the boxes contentleft and contentright: the text does have a green background. If I view my site in IE8 or Firefox, I see different behaviour. I do not see a green background. I know that the bahaviour in IE8 and firefox is the correct behaviour following the css specifications for floating. But how do I change my stylesheet to get a site with the behaviour of IE7 in IE8 and Firefox. Important restriction is that I do not know the amount of text placed in the center part. So I can not give the center box a height in my stylesheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<style type="text/css">
.header{
	background-color:red;
	width:800px;
	height:40px;
	}
	
.footer{
	background-color:cyan;
	width:800px;
	height:40px;
	}
	
.center{width:800px;	
background-color:green;}

.contentleft{
width:200px;
float:left;}

.contentright{
width:200px;
float:left;}
	
</style>
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<body>
	
	<div class="header"></div>
	<div class="center">
		<div class="contentleft">
		contentleft contentleft contentleft
		</div>
		<div class="contentright">
		contentright contentright contentright
		</div>
	</div>
	<div class="footer"></div>
	</body>
</html>

Open in new window

numberkruncher

The markup in your question is incorrect because the "style" tags should be enclosed somewhere within the html body. I have added a "head" section for this. I suspect that this may only be where you've written this question though.

I have added a wrapper tag with the class "container" which provides an area for your background.

I have also added "clear:both" to reset the floating layout to normal layout.

Let me know how you get on!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			.header {
				background-color:red;
				width:800px;
				height:40px;
				/* Added */
				clear:both;
			}
			.footer {
				background-color:cyan;
				width:800px;
				height:40px;
				/* Added */
				clear:both;
			}
			.container {
				background-color:green;
				width:800px;
			}
			.center{
			}
			.contentleft {
				width:200px;
				float:left;
			}
			.contentright {
				width:200px;
				/* I changed this to right. */
				float:right;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header"></div>
			<div class="center">
				<div class="contentleft">
				contentleft contentleft contentleft
				</div>
				<div class="contentright">
				contentright contentright contentright
				</div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

Open in new window

adiemeer

ASKER

Hi numberkruncher!

thank you very much for your solution. This helps me very good. But I still have another problem. In order to make a simplified example of my situation I defined a footer with a fixed height. Actually I do not have a footer with a fixed height. The height of the footer has to be the rest of the window. So the cyan colour in my example is not 40px but must have the height to fill the window with the cyan colour at the bottom. Do you know how to solve this?

ASKER CERTIFIED SOLUTION

numberkruncher

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adiemeer

ASKER

Thank you very much!!!