[SOLVED] CSS aligns incorrectly in Opera & Firefox

[Mantlet]

Or maybe better, I'm probably wrong somewhere and now my page blocks are floating around like crazy.

I basically want two page blocks next to eachother. So, in one I float the divs to the right. Now, on the one that stays left, because I didn't add a float, I want to put an image and a title. So I float the image to the left. Now, in IE that looks great. Image with title next to it. In Firefox it now puts the image below the div area it's actually in and the title takes its place and goed left.

I've tried every float, display and clear combination I could think off. But it never aligns everything correctly. This happens, or the text gets pushed down. Or the entire page block gets pushed down.

Anyway, this is the code for the page block that stays left:

Code: Select all

<div class="header" id="links">
<img src="uploads/images/layout/{content block="logo" oneline="true"}.jpg" alt="" width="80" height="66" />
<span><strong>{$title}</strong></span>
</div>
<div class="content" id="links">{content}</div>

This page block goes to the right:

Code: Select all

<div class="header" id="rechts">
<img src="uploads/images/layout/{content block="logo" oneline="true"}.jpg" alt="" width="80" height="66"/>
<span><strong>{$title}</strong></span>
</div>
<div class="content_rechts" id="rechts">{content}</div>

And this is the applied CSS:

Code: Select all

.header {
	background-image: url(uploads/images/layout/bg_headers.jpg);
	background-repeat: repeat-x;
	height: 66px;
	width: 350px;
	color: #FFFFFF;
	display: block;
}
.header span {
	position: relative;
	top: 30px;
	font-size: 19px;
	font-style: italic;
}
#rechts {
	float:right;
	clear: right;
}
#rechts span {
	left: 40px;
}
#rechts img {
	float:right;
}
#links img {
	float:left;
}

The site where you can see the error http://www.itsfaceit.nl. Just watch it with IE to see what it should look like and with Firefox or Opera to see the error.

Hopefully you can help me out. Like I said, I'm probably overseeing some stupid thing I did wrong.

[Mantlet]

Ok, I looked into this a little more and worked around it another way. Instead of floating the left image left, I left it there. The text next to it would then be forced down, which I corrected by putting that span's top to -20px.

Not the most lovely solution, but it works.

So this:

Code: Select all

#rechts img {
	float:right;
}
#links img {
	float:left;
}

Became:

Code: Select all

#rechts img {
	float:right;
}
#links span {
	top: -20px;
}