Hi everyone,
This CSS quirk has been bugging me for several days and I really dont
want to resort to using tables. Please help, if you can.
Summary:
Aligning 2 DIVS inside a DIV using floats makes the floated DIVS
render outside the boundaries of their container DIV (on Firefox
1.0.4)
In Detail:
I have 2 DIVs inside a master container DIV. I want one of the DIVS on
the left, the other on the right. Easy enough. I can float them left
and right respectively.
Now the problem is, in IE everything looks fine. Firefox however
renders the master DIV and then renders the 2 contained DIVS outside
it. My code is attached. If anyone has any ideas on why Firefox is
doing this or if my CSS is just plain wrong, please let me know.
Thanks in advance.
My Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#searchResultsContainer
{
width: 849px;
border: 1px solid gray;
}
#refineResultsContainer
{
width: 200px; height: 100%;
border: 1px solid gray;
border-collapse: collapse;
margin: 5px;
font-size: 12px;
font-family: arial;
margin: 0px;
position: relative; top: -1px; left: -1px;
float: left;
}
#searchResultsArea
{
float: left;
width: 645px;
border: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<div id="searchResultsContainer">
<div id="refineResultsContainer">
<div style="background-color: #e4f4e7; margin: 5px; font-size:
12px; height: 100%;">
<div>refine:</div>
</div>
</div>
<div id="searchResultsArea">
<div id="frontpageTagline">
<h1 class="taglineTitle">tagline</h1>
Tagline filler text in here. Ipsum Lorum.
</div>
asdfaSD
</div>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
