Calling all webdesign gurus!

StardogChampion · Jan 15, 2005

I'm having some problems with some CSS code for layout. I'm trying to get this panel to work for a site, but i'm having trouble, so i've simplified it down to boldass colours to try and make it work.

I'm pretty new to CSS so I must be doing something wrong.

Here's the code for the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS</title>
<meta name="generator" content="TSW WebCoder">
<style type="text/css">
	body
	{
		margin: 0;
		padding: 0;
		font-family: verdana, arial, tahoma, sans-serif;
		color: #000;
		background-color: #FFFFFF;
	}

#panel-container
{
	margin: 80px auto;
	width: 500px;
	border: 1px solid #000000;
	background-color: #FFFFFF;
}
#panel-title
{
	height: 50px;
	background-color: #FF0033;
}
#panel-left
{
	float: left;
	height: 50px;
	width: 200px;
	background-color: #99FFFF;
}
#panel-right
{
	float: right;
	height: 50px;
	width: 200px;
	background-color: #99FFFF;
}
</style>
</head>

<body>


<div id="panel-container">
	<div id="panel-title">Panel Title</div>
	<div id="panel-left">test</div>
	<div id="panel-right">test</div>
</div>


</body>
</html>

It looks fine in IE, but in Firefox the left and right panels go out of the container.

georgeblunt · Jan 19, 2005

hmm.. looks fine to me.. everything is in order.. in ie and firefox.
perhaps try "class" instead of "id".. only thing i can think of at the moment..
got any screenshots?

theGreenBunny · Jan 19, 2005

That's because they're floats, which shouldn't extend the container. IE violates the W3C CSS specs on that point and encloses the floats in the container anyway.

You can enclose the floats in proper browsers by either making the container a float as well (and perhaps putting it inside an invisible wrapper container for positioning it in the center of the page) or using a clearing element.

The last option is the easiest, just add <div ></div> at the bottom of the panel-container.

Code:

<div id="panel-container">
	<div id="panel-title">Panel Title</div>
	<div id="panel-left">test</div>
	<div id="panel-right">test</div>
	[b]<div ></div>[/b]
</div>

edit: btw, check http://positioniseverything.net for more info on CSS browser incompatibilities.

Calling all webdesign gurus!

StardogChampion

Tank

georgeblunt

Newbie

theGreenBunny

Tank

Similar threads