XHTML transitional question - Computer Programmers, Programming Forum

Dimkin · #1 01-21-2010

Hello,
I have the following code:

HTML file

Code:

<!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">
<head><title>
	Revadim Project
</title>
<link href="Style.css" rel="stylesheet" type="text/css" /></head>
<body>

    <div id="container">
        <div id="content">
               <p>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
				</p>
        </div>
        <div id="leftmenu">
                <p>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
					Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
				</p>
        </div>
    </div>
</body>
</html>

CSS file

Code:

#container
{
	width:990px;
	border:2px solid black;
	margin:0 auto;
}

#content
{

	width:830px;
	float:right;
	border:1px solid black;
}

#leftmenu
{
	width:150px;
	float:left;
	border:1px solid black;

When I run the html file, everyhting runs fine except that the content and the leftmenu div aren't sitting insite the container div. From what I've checked this is happening because os me using the XHTML transitional. Can anyone tell me why this is happening and how to fix this?

Thank you in advance,
Dima

Looking# · #2 03-10-2010

It looks to me that one of your problems is that you forgot to close your <head> tag. Your document header should look like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml vers="1.0" lang="en"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
...
</body>
</html>

However, I would recommend that you upgrade to HTML 5, which is much better than XHTML. This is a normal HTML5 document:

HTML Code:

<!DOCTYPE html>
<html>
<head>
...your code here...
</head>
</html>

So no messy DTD or XML attributes to deal with. Much easier to use, and much cooler.

Dimkin · #3 03-10-2010

Thanks for the reply, though my head closing tag is right after the link tag

Code:

<link href="Style.css" rel="stylesheet" type="text/css" /></head>

Looking# · #4 03-11-2010

Ah, I see it now. Good job.

I've taken a look at your code, and here's what I found:

For one thing, your CSS rule for the div "leftmenu" doesn't have a closing curly brace. For another, the float properties in your CSS are what's causing your divs to escape their container. I suggest that you find another way to work out how to get your divs positioned that doesn't use float. Or you could use the "clear" property to tell the left div not to let anything to get on top of it.

Just some suggestions.

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Friends

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Sponsor

Friends