CSS - Overlapping div's?

MagSafe

MagSafe

MagSafe

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
Hi :)

I'm creating a template with the usual css and html 2 column layout within a container, however i seem to have got myself stumpted when inserted more div's below these columns.

I've uploaded the website here and as you can see the right column (as well as the left column, you just can't tell as theres not enough text) is overflowing right past the footer as well as right past the actual page body and the container div(you can tell when you apply borders).

I'm hoping someone can spot where I'm going wrong here...as i've been trying for most of the afternoon and just can't solve it :confused:

Also...if someone fancies a challenge the page doesn't seem to be compatible in Firefox at all :confused:

I've included the code for whoever wants to muck about with it :)

Thanks,

Steven.

index.htm file
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<title>Keep Scotland Beautiful</title>
  		<link type="text/css" rel="stylesheet" href="cms2.css" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>

	<body>
		<div id="container">
			<div id="header">
				<div id="header-top">header top test</div>
				<div id="header-middle">
					<img src="graphics/scotlandlandscape.jpg" alt="Scotland Landscape" width="700px" height="165px" />
				</div>
				<div id="header-bottom"></div>
			</div>
			<div id="main-content">
				<div id="left-content">left content test</div>
				<div id="right-content">
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
				</div>
				<div id="footer">footer test</div>
			</div>
		</div>
	</body>

</html>

cms2.css file
Code: 
/* Body */

body
{
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-color: #ffffff;
	color: #658dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#container
{
	margin: auto;
	padding: 0px;
	position: relative;
	width: 700px;
	height: 100%;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 203px;
	top: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-top
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 30px;
	top: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-middle
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 165px;
	top: 30px;
	background-color: #ffffff;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-bottom
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 8px;
	top: 195px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 8pt verdana, helvetica, san-serif;
}

#main-content
{
	margin: 0px;
	padding: 0px;
	width: 700px;
	height: 100%;
	top: 203px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#left-content
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 170px;
	height: 100%;
	top: 203px;
	left: 0px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#right-content
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 530px;
	height: 100%;
	top: 203px;
	left: 170px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
	border: 1px solid #659dbd;
}

#footer
{
	margin: auto;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 20px;
	bottom: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 8pt verdana, helvetica, san-serif;
}
 
Thanks for the reply :)

I'm not to sure what you mean by clearing the footer? I've tried removing it completey and changing it to position: relative; but that doesn't seem to work either.

As for the Firefox problems its just the footer has completey disapeared and from what I can see is stuck at the top underneath the header.
 
hmm, i've put that into the footer's div within the css sheet (as well as removing the absolute position with it) and it isn't working :confused:

here's the footer code:

Code: 
#footer
{
	margin: auto;
	padding: 0px;
	position: absolute;
	clear: both;
	width: 700px;
	height: 20px;
	bottom: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 8pt verdana, helvetica, san-serif;
}

thanks again :)
 
nope, sorry, it's refusing to budge :(

I don't suppose someone could test it on there machine and try and tackle it as whatever I do it just doesn't want to work...

Current code:

index.htm
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<title>Keep Scotland Beautiful</title>
  		<link type="text/css" rel="stylesheet" href="cms2.css" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	</head>

	<body>
		<div id="container">
			<div id="header">
				<div id="header-top">header top test</div>
				<div id="header-middle">
					<img src="graphics/scotlandlandscape.jpg" alt="Scotland Landscape" width="700px" height="165px" />
				</div>
				<div id="header-bottom"></div>
			</div>
			<div id="main-content">
				<div id="left-content">left content test</div>
				<div id="right-content">
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
					right content test right content test right content test right content test right content test right content test
				</div>
				<div id="footer">footer test</div>
			</div>
		</div>
	</body>

</html>

cms2.css
Code: 
/* Body */

body
{
	margin: 0px;
	padding: 0px;
	height: 100%;
	background-color: #ffffff;
	color: #658dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#container
{
	margin: auto;
	padding: 0px;
	position: relative;
	width: 700px;
	height: 100%;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 203px;
	top: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-top
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 30px;
	top: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-middle
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 165px;
	top: 30px;
	background-color: #ffffff;
	color: #ffffff;
	font: normal 10pt verdana, helvetica, san-serif;
}

#header-bottom
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 700px;
	height: 8px;
	top: 195px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 8pt verdana, helvetica, san-serif;
}

#main-content
{
	margin: 0px;
	padding: 0px;
	width: 700px;
	top: 203px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#left-content
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 170px;
	height: 100%;
	top: 203px;
	left: 0px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
}

#right-content
{
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 530px;
	height: 100%;
	top: 203px;
	left: 170px;
	background-color: #ffffff;
	color: #659dbd;
	font: normal 10pt verdana, helvetica, san-serif;
	border: 1px solid #659dbd;
}

#footer
{
	margin: auto;
	padding: 0px;
	position: absolute;
	clear: both;
	width: 700px;
	height: 20px;
	bottom: 0px;
	background-color: #659dbd;
	color: #ffffff;
	font: normal 8pt verdana, helvetica, san-serif;
}
 
nope... sorry but that doesn't work either :confused:, like i said it just doesn't want to work

could anyone copy the code into files and try it on there pc first? , as with this way it just isn't happening

thanks
 
You must log in or register to reply here.
Back
Top Bottom