CSS - Overlapping div's?

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;
}
 
Associate
Joined
9 Jan 2006
Posts
1,440
Location
Nottingham
well, you've absolutely positioned the footer which is why everything overlaps over it. you want to either clear the footer and/or not bother with the positioning for it. it doesn't look too bad in FF, some of the margins and borders look a bit strange so it should be reasonably easy to fix.

hope this helps :)

nin9a
 
Associate
OP
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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.
 
Associate
Joined
6 Jul 2004
Posts
465
clear: both;

will clear the element from any floated elements above it. I didn't check your code but just what nin9abadga said, should do the trick.
 
Associate
OP
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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 :)
 
Associate
OP
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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;
}
 
Soldato
Joined
3 Aug 2005
Posts
4,534
Location
UK
Only skim-read this thread, but this should work:

Code:
#footer
{
  margin: auto;
  padding: 0px;
  clear: both;
  width: 700px;
  height: 20px;
  background-color: #659dbd;
  color: #ffffff;
  font: normal 8pt verdana, helvetica, san-serif;
}
Edit: It would appear nin9abadga was wrong. It would seem, in order for clear to take effect, at least one (preferably both; absolute positioning is messy) of the block-levels elements above must be floated :)
 
Last edited:
Associate
OP
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
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
 
Associate
Joined
9 Jan 2006
Posts
1,440
Location
Nottingham
it's something to do with the positioning and the mix of it.

try this so you can see how it works:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body {
padding: 0px;
margin: 0px;
}
#header {
width: 700px;
height: 200px;
border: 1px solid black;
margin: 0px auto 0px auto;
}
#content {
margin: 0px auto 0px auto;
width: 700px;
/*height: 500px;*/
}
#left {
float: left;
clear: right;
width: 200px;
background: #ccc;
}
#right {
/*float: right;
clear: left;*/
margin-left: 220px;
width: 475px;
border: 1px solid black;
}
#footer {
margin: 0px auto 0px auto;
width: 700px;
background: #ccc;
clear: both;
}
p.clear {
clear: both;
background: #ccc;
}
</style>
</head>

<body>
<div id="header">header</div>
<div id="content">
<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in nulla. Pellentesque nibh diam, posuere id, luctus non, feugiat sit amet, diam. Quisque vel neque. Quisque felis velit, semper ac, dignissim sed, tempus eget, nunc. Vestibulum vulputate. Vivamus dolor sem,</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in nulla. Pellentesque nibh diam, posuere id, luctus non, feugiat sit amet, diam. Quisque vel neque. Quisque felis velit, semper ac, dignissim sed, tempus eget, nunc. Vestibulum vulputate. Vivamus dolor sem, molestie a, aliquet vel, lobortis vel, nunc. In hac habitasse platea dictumst. Vestibulum sed arcu vitae mauris accumsan aliquet. Praesent feugiat est sed lectus. Mauris commodo luctus augue. Duis nibh nisi, porttitor vel, dapibus et, lobortis non, elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in nulla. Pellentesque nibh diam, posuere id, luctus non, feugiat sit amet, diam. Quisque vel neque. Quisque felis velit, semper ac, dignissim sed, tempus eget, nunc. Vestibulum vulputate. Vivamus dolor sem, molestie a, aliquet vel, lobortis vel, nunc. In hac habitasse platea dictumst. Vestibulum sed arcu vitae mauris accumsan aliquet. Praesent feugiat est sed lectus. Mauris commodo luctus augue. Duis nibh nisi, porttitor vel, dapibus et, lobortis non, elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in nulla. Pellentesque nibh diam, posuere id, luctus non, feugiat sit amet, diam. Quisque vel neque. Quisque felis velit, semper ac, dignissim sed, tempus eget, nunc. Vestibulum vulputate. Vivamus dolor sem, molestie a, aliquet vel, lobortis vel, nunc. In hac habitasse platea dictumst. Vestibulum sed arcu vitae mauris accumsan aliquet. Praesent feugiat est sed lectus. Mauris commodo luctus augue. Duis nibh nisi, porttitor vel, dapibus et, lobortis non, elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque in nulla. Pellentesque nibh diam, posuere id, luctus non, feugiat sit amet, diam. Quisque vel neque. Quisque felis velit, semper ac, dignissim sed, tempus eget, nunc. Vestibulum vulputate. Vivamus dolor sem, molestie a, aliquet vel, lobortis vel, nunc. In hac habitasse platea dictumst. Vestibulum sed arcu vitae mauris accumsan aliquet. Praesent feugiat est sed lectus. Mauris commodo luctus augue. Duis nibh nisi, porttitor vel, dapibus et, lobortis non, elit.</p>
<p class="clear">&nbsp;</p>
</div>

</div>
<div id="footer">footer</div>
</body>
</html>

left div is floated (im assuming that is for nav?) whilst the right is contained but cleared by a left margin. the content should also stretch depending on what you put in it, ensuring the footer is always underneath the content at the bottom.

it might not be ideal (someone may have already posted a better idea) but it's a solution that fits what you are trying to do i think. you'll have to modify my suggestions to suit your needs but feel free.

nin9a
 
Back
Top Bottom