asked on

How do I stop the Footer div is being overlapped by Content div

Dear all,

I am working on my first site that I have ever used CSS properly on and I have a problem where if there is too much content on the page it over laps the footer div like here:

http://www.new.arockes.org.uk/start.htm

How can I prevent this? The stylesheet is pasted in the code section. This is where I think the problem will most likely lay:
http://www.new.arockes.org.uk/site.css

It is .layout3 and .layout4 that need to move down automatically when the content expands in height.

Many thanks,
Jack

.top_banner1{
position: absolute;
border:none;
color:#EEEEEE;
left:100px;
top:18px;
text-align:center;
font-style: normal;
color:#E7112D;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:bold;
width: 280px;
height:62px;
}
 
 
.top_banner2{
position:absolute;
border:none;
color:#EEEEEE;
left:377px;
top:5px;
}
 
 
.layout1{
position:absolute;
border:none;
color:#EEEEEE;
left:100px;
top:69px;
}
 
.layout2{
position:absolute;
left:100px;
top:101px;
}
 
.next_meet{
position:absolute;
border:none;
width:auto;
left:377px;
top:108px;
font-style:normal; font-family:Arial, Helvetica, sans-serif; color:#555555; font-size:13px;
}
 
 
.layout3{
position:absolute;
border:none;
color:#EEEEEE;
left:100px;
top:569px;
}
 
.layout4{
position:absolute;
left:100px;
top:561px;
clear:both;
}
 
 
.content1{
	position:absolute;
	border:none;
	left:100px;
	top:125px;
	min-width: 680px;
	max-width: 680px;
	width: 680px;
	font-family:Arial, Helvetica, sans-serif;
	color: #444444;
	padding:5px;
}
 
.search{
	position:absolute;
	border:none;
	left:100px;
	top:125px;
	min-width: 680px;
	max-width: 680px;
	width: 680px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color: #444444;
	}
	
.font-style2 {
	font-size: 13px
	}

Open in new window

Rouchie

You are using position:absolute on all your containers which means that nothing will ever move and will only overlap. Absolutely tells the browser that these elements are to be placed exactly at the specified location regardless of other content, so this creates the overlaps.

You must use a more fluid method of layout if you need things to move around with the content.

Here is a tutorial on how CSS works:
http://www.brainjar.com/css/positioning/
http://www.subcide.com/tutorials/csslayout/

Here are some free layouts to inject your content into:
http://layouts.ironmyers.com/

IanTh

you should really have a div wrapper around all the other div's and set the wrapper div as 'the main browser size'
currently 800*600 or 1024*768
I do it on all my web code as its the best way to use css for web layout as it gives you control

<body>
<div id="container">
<div id="main">
...
...
</div>

then in css
#container{
      background-color: #FFFFFF;
      width: 1024px;
      margin-right: auto;
      margin-left: auto;
}

thats all the screen and its auto sized left and right

ASKER CERTIFIED SOLUTION

Britt Thompson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lharrispv

Ian,

On the main wrapper div you suggest. Should it be set to position: absolute or position:relative and why?

SOLUTION

Rouchie

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lharrispv

OK that is what I thought. I just wanted to confirm. Thank you.

Jack

ASKER

Many thanks all and especially to renazonse for recreating the css. It seems to work really well.

I have to study this to see the full changes and how they work. I will come back with some questions soon.

Jack

ASKER

Is it possible to set the footer .layout3 { } and .layout4 { } to a minimum height so they are at least 600px from the header but still moves with expanding data in the content area?

Thanks
Jack

SOLUTION

IanTh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Britt Thompson

Here you go...min-height doesn't work in IE6 so you need the height:auto !important; in this one. You can add that and the static height just to the ie6.css if you want:

This would be in your regular stylesheet:

.content1 {
      width: 680px;
      color: #444444;
      padding:5px;
      min-height:600px;
}

This would be the style in your ie6.css

.content1 {
      height:auto !important;
      height:600px;
}

or, you can just use the entire block in your main stylesheet:

.content1 {
      width: 680px;
      color: #444444;
      padding:5px;
      min-height:600px;
      height:auto !important;
      height:600px;
}

Jack

ASKER

Ah, that was an easy one thinking about it. Thanks, I did not know about the IE6 bit - hopefully no one will still be using that!

Britt Thompson

it works in IE6 if you use all this code:

.content1 {
width: 680px;
color: #444444;
padding:5px;
min-height:600px;
height:auto !important;
height:600px;
}

Jack

ASKER

Thank you very much for your help. Exactly how I wanted it.

Regards,
Jack

Jack

ASKER

Sorry, I closed this a little early. I was just cross browser testing and noticed that in IE8 the site is not centred as it is in Firefox and Chrome. What could be causing this? container position:relative perhaps?

Thanks
Jack

Britt Thompson

Make sure you have the doc type in at the top of the code:

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

it will not center without this....the code I pasted works in IE8

IanTh

i use divs and they work in ie8 no problem as I make a wrapper for the screen and I have margin left and right: auto as that centers it on the content div ie the internal container to hold top, left, main, right and footer

Jack

ASKER

Thank you. That code was there but I had problems with the dreamweaver template over riding the doctype. Solved now.

Jack