CSS layout in Firefox problem

macu · #1 (**permalink**) 08-22-07, 06:42 AM

Following is a simplefied version of a page I am having an issue with. In IE it displays OK without the display:table, but requires it to display OK in Firefox. Problem is that the display:table is interferring with a componentart grid I'm using in the left column, it causes my right column to wrap underneath.

I suspect there's a problem with something I'm doing to require the display:table in the first place but I can't see what. Does anyone know how to get this displaying in Firefox with the outer most div's border around all contained divs without the display:table??

Thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Test</title>

<style type="text/css">
	
.Frame
{
	width: 710px;
	margin: 10px auto auto auto;
	border: thin solid black;
	/*display: table;*/
}

.ContentListingMain
{
	width: 600px;
	padding: 2px;
	float: left;
}

.ContentListingButtons
{
	width: 100px;
	padding: 2px;
	text-align: right;
	float: left;
}
	
</style>

</head>

<body>
<div class="Frame">
	<div class="ContentListingMain">Grid goes here</div>
	
	<div class="ContentListingButtons"><input type="button" value="Do" /></div>
</div>
</body>
</html>

macu · #2 (**permalink**) 08-22-07, 08:30 AM

Solution is described here:

http://www.quirksmode.org/css/clearing.html