HTML Forum

**henke8100** · 02:23 PM

I am creating a webiste where I want one div over an another. This isn't my main page, just an example.
http://oseveno.tk/example.html

In chrome it works great, the text is where it is supposed to be.
In firefox, it adds a linebreak that I don't want.
And in IE... the divs don't want to be over each other.

How can I fix this please?

HTML Code:

<html> 
	<body> 
		<!-- description box --> 
		<div style="width:500px;float:right;border:solid green;position:relative;z-index:2;background:url('tbg.png');border-width:0 0 0 2px;padding:20px;font-family:arial black;"> 
			<p style="color:blue;font-size:25px;"> 
				Header
			</p> 
			<p>Some text that force the user to register:D<br><br><br><br><br><br> 
			<a href="?p=register"><img src='register.png' style="border:0"></a> 
			</p> 
		</div> 
		<br><br><br> 
		<!-- link 1 --> 
		<div style="background:url(link.png) no-repeat;height:53;"> 
			<img src='img/1.png' width='50' height='53' align='left' alt='!'> 
			<span style='font-weight:bold;font-size:25px;white-space:nowrap;'>&nbsp;<span  id="title1">a long header - it is longer then possible:D</span></span><br> 
			<span style='font-weight:bold;font-size:15px;white-space:nowrap;'>&nbsp;<span  id="text1">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></span> 
		</div> 
		<br> 
		<!-- link 2 --> 
		<div style="background:url(link.png) no-repeat;height:53;"> 
			<img src='img/1.png' width='50' height='53' align='left' alt='!'> 
			<span style='font-weight:bold;font-size:25px;white-space:nowrap;'>&nbsp;<span  id="title2">short header this time.</span></span><br> 
			<span style='font-weight:bold;font-size:15px;white-space:nowrap;'>&nbsp;<span  id="text2">This text does not do a linebreak.</span></span> 
		</div> 
	</body> 
</html>

If the browser is a bit over 1 000 pixels it looks pretty good, but if you resize it it looks bad.

Help please?
Thanks!

**chrishirst** · 02-17-2010, 02:20 PM

A link to "localhost" is of no use whatsoever.

**henke8100** · 02-17-2010, 02:22 PM

Ohh I am very sorry, I got both a localhost and public adress.

**chrishirst** · 02-17-2010, 02:38 PM

It's basically doing exactly what you tell it to. You should learn about document structure and block elements, and how the document flow works.

and in CSS "height:53" needs a unit for the dimension, (53 what?)

**henke8100** · 02-17-2010, 02:45 PM

Thanks for answering!

I know that I should provide unit(px, cm and so on...), but I was in a bit of hurry when I made this example page.
Updated code, and no bigger changes: the text was just moved a few pixels.

I have been trying to get this to work pretty long now. Thanks for any further help!

**ChaibiAlaa** · 02-17-2010, 02:49 PM

You have to simply make the width static and not dynamic (don't change using users resolution), That way, you get everywhere the same good result, but it might get bad effect on old users using very old screens which are very small.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!