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

LVL 4
JackIT ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RouchieCommented:
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/
0
IanThCommented:
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

0
Britt ThompsonSr. Systems EngineerCommented:
Both suggestions are correct...Here's what they're talking about. I've removed your template tags to make this easier to clean up but there's a container for everything and a header container. I removed quite a bit of unnecessary CSS in your stylesheet and in your HTML. Suffering through getting stuff to work is a good way to learn but so is seeing how it's done correctly based on what you have. Hope this helps you on your way.
/* CSS */
 
 
body {
	color:#eee;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
 
#container {
	width:690px;
	margin:0 auto;
	position:relative;
}
 
.top_banner1 {
	text-align:center;
	font-style: normal;
	color:#E7112D;
	font-size:17px;
	font-weight:bold;
	width: 280px;
	height:62px;
	float:left;
}
 
.top_banner2 { }
 
.layout1 { margin-top:10px; }
 
.layout2 { }
 
.next_meet {
	font-style:normal;
	color:#555555;
	font-size:13px;
}
 
.layout3 { }
 
.layout4 { }
 
.content1 {
	width: 680px;
	color: #444444;
	padding:5px;
}
 
.content1 p {
	font-size:12px;
	font-weight:normal
}
 
.search {
	width: 680px;
	text-align:center;
	color: #444444;
}
 
.font-style2 { font-size: 13px }
 
 
<!--HTML-->
 
<!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=UTF-8" />
<title>Alfa Romeo Owners Club, Kent and East Sussex Section</title>
<link rel="stylesheet" type="text/css" href="site.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="top_banner1"> Alfa Romeo Owners Club, <br>
Kent & East Sussex Section</div>
<div class="top_banner2"> <img src="http://www.new.arockes.org.uk/images/alfa_romeo_script_with_logo.jpg" alt="Alfa script with logo" width="403" height="62"> </div>
<div class="layout1"> <a href="start.htm"><img src="http://www.new.arockes.org.uk/images/home_button.gif" alt="Home Button" border="0"></a> <a href="news.htm"><img src="http://www.new.arockes.org.uk/images/news_button.gif" alt="News Button" border="0"></a> <a href="aboutus.htm"><img src="http://www.new.arockes.org.uk/images/about_us_button.gif" alt="About Us Button" border="0"></a> <a href="events_2009.htm"><img src="http://www.new.arockes.org.uk/images/events-2009_button.gif" alt="Events 2009 Button" border="0"></a> <a href="past_events.htm"><img src="http://www.new.arockes.org.uk/images/past_events_button.gif" alt="Past Events Button" border="0"></a> <a href="articles.htm"><img src="http://www.new.arockes.org.uk/images/articles_button.gif" alt="Articles Button" border="0"></a></div>
<div class="layout2"> <img src="http://www.new.arockes.org.uk/images/silver_line_1.gif" width="682" height="4"> </div>
</div>
<div class="next_meet"> Next monthly meeting: Thursday 30 July 2009 at <a href="http://maps.google.co.uk/maps?f=d&amp;source=s_d&amp;saddr=51.305184,0.330995&amp;daddr=A20%2FLondon+Rd&amp;hl=en&amp;geocode=%3BFTHbDgMd9gwFAA&amp;mra=dme&amp;mrcr=0&amp;mrsp=0&amp;sz=17&amp;sll=51.30509,0.33187&amp;sspn=0.003468,0.009613&amp;ie=UTF8&amp;ll=51.30509,0.33187&amp;spn=0.013871,0.038452&amp;z=15" target="_blank">The Moat, Wrotham</a></div>
<div class="content1">
<h3>Welcome to the Alfa Romeo Owners Club, Kent &amp; East Sussex Section website.</h3>
<p>This site is here to serve as an infomation point for all of our up and coming events as well as a source of information on the local Alfa Romeo dealerships and independant specialists. We also invite all members to &quot;show off&quot; their car on the site. You can add details of your Alfa via the &quot;<a href="memberscars.htm">Members Cars</a>&quot; section.</p>
<p> Please take a look around the website as there is likely to be something to interest everyone and as ever we would welcome your feedback on the site and the club section. </p>
<p>Please leave comments for the commitee via the &quot;<a href="contactus.htm">Contact Us</a>&quot; page. We look forward to seeing you are the next meeting. </p>
<p>For a list of all meetings then head to the &quot;<a href="events_2009.htm">Events - 2009</a> page which is constantly being updated with new events when they are finalised. </p>
<p>This site is here to serve as an infomation point for all of our up and coming events as well as a source of information on the local Alfa Romeo dealerships and independant specialists. We also invite all members to &quot;show off&quot; their car on the site. You can add details of your Alfa via the &quot;<a href="memberscars.htm">Members Cars</a>&quot; section.</p>
<p> Please take a look around the website as there is likely to be something to interest everyone and as ever we would welcome your feedback on the site and the club section. </p>
<p>Please leave comments for the commitee via the &quot;<a href="contactus.htm">Contact Us</a>&quot; page. We look forward to seeing you are the next meeting. </p>
<p>For a list of all meetings then head to the &quot;<a href="events_2009.htm">Events - 2009</a> page which is constantly being updated with new events when they are finalised. </p>
<p>This site is here to serve as an infomation point for all of our up and coming events as well as a source of information on the local Alfa Romeo dealerships and independant specialists. We also invite all members to &quot;show off&quot; their car on the site. You can add details of your Alfa via the &quot;<a href="memberscars.htm">Members Cars</a>&quot; section.</p>
<p> Please take a look around the website as there is likely to be something to interest everyone and as ever we would welcome your feedback on the site and the club section. </p>
<p>Please leave comments for the commitee via the &quot;<a href="contactus.htm">Contact Us</a>&quot; page. We look forward to seeing you are the next meeting. </p>
<p>For a list of all meetings then head to the &quot;<a href="events_2009.htm">Events - 2009</a> page which is constantly being updated with new events when they are finalised. </p>
</div>
<div class="layout3"> <a href="contactus.htm"><img src="http://www.new.arockes.org.uk/images/contact_us_button.gif" alt="Contact Us Button" border="0"></a> <a href="links.htm"><img src="http://www.new.arockes.org.uk/images/links_button.gif" alt="Links Button" border="0"></a> <a href="forsale.htm"><img src="http://www.new.arockes.org.uk/images/for_sale_button.gif" alt="For Sale Button" border="0"></a> <a href="memberscars.htm"><img src="http://www.new.arockes.org.uk/images/member_cars_button.gif" alt="Members Cars Button" border="0"></a> <a href="servicing.htm"><img src="http://www.new.arockes.org.uk/images/servicing_button.gif" alt="Servicing Button" border="0"></a> <a href="search.htm"><img src="http://www.new.arockes.org.uk/images/search_button.gif" alt="Search Button" border="0"></a></div>
<div class="layout4"> <img src="http://www.new.arockes.org.uk/images/silver_line_2.gif" width="682" height="4"></div>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

lharrispvCommented:
Ian,

On the main wrapper div you suggest.  Should it be set to position: absolute or position:relative and why?
0
RouchieCommented:
Position relative means that everything inside it will use that particular container to base its position on, rather than the top left of the browser's viewing area (the page itself).  So in essence it becomes the holder for everything inside it, and stops stuff overlapping (although this can be overridden if required)

The margin value then forces that div to be central in the browser window.
0
lharrispvCommented:
OK that is what I thought.  I just wanted to confirm.  Thank you.
0
JackIT ManagerAuthor Commented:
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.
0
JackIT ManagerAuthor Commented:
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
0
IanThCommented:
1 use a wrapper div to cover modern screens ie 1024*768
2 the create a content div at 800*600 (current viewing habit)
3 the create a header and a footer of 100*600 place them in the content div
4 then create a main div 600*600 and put that between the header and footer

and if you want create a left image bar or right bor but you will need to cut down the main to accomodate them
if you use pixels you can be accurate and stop overlaps. If you get overlaps your containers ie the divs havent got enough room for its content
0
Britt ThompsonSr. Systems EngineerCommented:
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;
}
0
JackIT ManagerAuthor Commented:
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!
0
Britt ThompsonSr. Systems EngineerCommented:
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;
}
0
JackIT ManagerAuthor Commented:
Thank you very much for your help. Exactly how I wanted it.

Regards,
Jack
0
JackIT ManagerAuthor Commented:
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
0
Britt ThompsonSr. Systems EngineerCommented:
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
0
IanThCommented:
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
0
JackIT ManagerAuthor Commented:
Thank you. That code was there but I had problems with the dreamweaver template over riding the doctype. Solved now.

Jack
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.