One div appears on top of another?

matthewhaworth · July 14, 2008

Okay, I'm new to creating layouts by using <div>s, I've always used tables before.. but now I want to be more 'compliant', 'web 2.0' etc lol. However, the problem I am having, is that the left and right columns of the page (the 'content') is on top of the footer. Which is placed below it in the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="matthewhaworth" />


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

<title>Matthew Haworth</title>
</head>

<body>
<!-- Header -->
<div id="header">
<div id="logo">
	<h1>Matthew Haworth</h1>
</div>
<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Projects</a></li>
		<li><a href="#">About Me</a></li>
	</ul>
</div>
</div>

<!-- Main Content -->
<div id="content">

<div id="left">
LEFT COLUMN
</div>
<div id="right">
RIGHT COLUMN
</div>

</div>

<!-- Footer -->
<div id="footer">
FOOTER
</div>

</body>
</html>

stylesheet:

*
{
margin: 0px 0px 0px 0px;
padding: 0px;
}

body
{
font-family: "Tahoma";
background: url(images/img01.jpg) repeat-x left top;
margin: 10px;
}

/* Header */

#header #logo
{
background: url(images/logo.png);
height: 100px;	
width: 800px;	
margin: 0px auto;
text-align: center;
}

#header #logo h1
{
/* Logo written as text settings */
padding: 25px;
color: #FFFFFF;
}

#header #menu
{
margin: 20px auto;
height: 50px;
width: 850px;
background: #454545;
color: #FFFFFF;
}

#header #menu ul
{
list-style:none;
line-height: normal;
padding: 15px;
text-align: center;
}

#header #menu li
{
display: inline;
float: left;
padding: 0px 15px;
}

#header #menu a
{
text-decoration: none;
text-transform: lowercase;
display: block;
color: #FFFFFF;

}

#header #menu a:hover
{
color: #ABABAB;
}

/* Body */

#content
{
margin: 0 auto;
width: 850px;
}

#content #left
{
float: left;
width: 215px;
background: #FF0000;
}
#content #right
{
float: right;
width: 620px;
background: #0000FF;
}

/* Footer */

#footer
{
margin: 0 auto;
width: 850px;
height: 20px;
text-align: center;
background: #00FF00;
}

I gave all the divs primary colour backgrounds to see exactly where they were (not that I like the colours together lol)

Here is a screenshot, as you can see the footer is 'on top' of the content.

lvtrii · July 14, 2008

Use clear:both; in the footer to force a new line

DataRater · July 15, 2008

I've got the same problem and already tried the clear: both; solution with no luck. I feel that only works with graphics but I'm not sure.

At the moment I've only got some divs and and I use border: 2px dashed yellow; to show each div. I change the color on each div so I know which is which.

My content div has height: auto as it will vary due to content and I want the footer to position itself under the content but instead it runs up the screen.

Here is my footer...

#Footer {

position: absolute;

clear: both;

top: auto;

height:20px;

width: 1200px;

font-size:large;

background-color: white;

border: 2px dashed yellow;

margin: 5px;

}

any ideas?

haku · July 15, 2008

clear works on any elements, not just images.

Without seeing the html for the elements in question, as well as the css for all the elements in question, it's hard/impossible to say what the problem is. And a link to the site is best.

Sign In

One div appears on top of another?

Recommended Posts

matthewhaworth

Link to comment

Share on other sites

lvtrii

Link to comment

Share on other sites

DataRater

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information