JeevesBond — Wed, 11 May 2005 23:24:51 +0000

That's ok then, sorry for lecturing!

syawilim — Wed, 11 May 2005 14:32:19 +0000

I generally don't name id's by position, in this case it just made it easy to understand.
But I did learn this the hard way, lucky it was only a small site.

JeevesBond — Wed, 11 May 2005 11:54:25 +0000

Glad to hear your problem has been sorted... Floats can be very confusing!

One other thing: You shouldn't really refer to elements as by their positioning or formatting, doing this negates the purpose of XHTML/CSS and what happens if one of those divs is positioned along the top of the page? As soon as you make a change all your id's need to be changed - a nightmare!

syawilim — Wed, 11 May 2005 00:59:13 +0000

Sorry I had been looking at it for too long and just didn't see it. You were right clear:both after the end of the right div. I had already tryed this many times without achieving the desired result, but I must have been dropping the tag in the wrong spot.

Thanks for your help.

Renegade — Sat, 07 May 2005 05:06:12 +0000

What? Did you try my code? I viewed it in Firefox and IE. It works just fine.

syawilim — Sat, 07 May 2005 00:04:25 +0000

It is the main div that I am having trouble with. The left and right divs are nested inside it but it has no height setting but when I put a lot of text into the right div it extends out the bootom of the main div. It works fine in IE but Firefox is the problem.

Assassin — Mon, 02 May 2005 22:25:06 +0000

if that doesn't work you might want to try the #right id in a span tag rather than a div.

Renegade — Mon, 02 May 2005 10:14:01 +0000

You had two problems:

1, You had set a height to #main and #right, if you want things to fit properly inside something, don't set a height to them.

2, Since you have floated everything, you need a block level element after you block of floats to make things look "right." This can be done by making an invisible DIV and setting "clear:both;" to it in the CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#main {
	width: 720px;
	border: 1px solid #000000;
}

#left {
	float: left;
	width: 300px;
	max-height: 300px;
	margin: 0;
	padding: 0;
}

#right {
  position: relative;
	float: left;
	text-align: left;
	width: 400px;
	min-height: 280px;
	margin: 0 0 0 10px;
	padding: 0px 0px 10px 0px;
}
</style>
<title></title>
</head>
<body>
<div id="main">
    <div id="left"><img src="image.jpg" width="300" height="300" border="0" alt=""></div>
    <div id="right">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    <h2>Heading 2</h2>
    <p>Text.</p>
    </div>
    <div style="position:relative;clear:both;"></div>
</div>
</body>
</html>

Hope that helped