Firefox hack?

[MacPC]

Hi,

I have this nested <div>layout:

<div class="left>
yadayada
<div class="right">
dodadoda
</div>
</div>

and the css looks like this:

div.left {
background-image: url("dimension.gif");
background-repeat: no-repeat;

padding: 0px;
padding-color: #00ff00;
border: 1px solid red;
width: 600px;
height: 200px;
}

div.right {
background-image: url("dimension.gif");
margin: 0;
float: right;
/* IE 5 and 6 fix */
//margin-top: -20px;
/* How to handle NS ? */
padding: 0px;
width: 300px;
height: 200px;
}

The problem is that a top margin of about 20px on the right <div> is added to IE, Firefox and NS, I work on Safari and it works fine. I used a little IE hack to fix the problem on IE but I am not sure how to fix it for NS and FF.

Any suggestion?

M.

 

[notagz1]

FF is out 20px;

Can you please post a url of the site. or show me it with the images.

thanks.

 

[ChrisDN]

From what I can see, use:

display: inline;
float: left;

in both DIVs.
Also, I don't think you should be nesting one DIV inside the other; have them seperate.

<div class="left>
yadayada
</div>
<div class="right">
dodadoda
</div>