Solved

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

Posted on 2009-06-30
17
433 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:JackHodson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +2
17 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 24743991
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
 
LVL 30

Expert Comment

by:IanTh
ID: 24744061
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
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 300 total points
ID: 24744993
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:lharrispv
ID: 24744998
Ian,

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

Assisted Solution

by:Rouchie
Rouchie earned 100 total points
ID: 24745092
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
 
LVL 8

Expert Comment

by:lharrispv
ID: 24745224
OK that is what I thought.  I just wanted to confirm.  Thank you.
0
 
LVL 4

Author Comment

by:JackHodson
ID: 24750734
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
 
LVL 4

Author Comment

by:JackHodson
ID: 24752544
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
 
LVL 30

Assisted Solution

by:IanTh
IanTh earned 100 total points
ID: 24752773
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24753830
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
 
LVL 4

Author Comment

by:JackHodson
ID: 24753914
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24753947
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
 
LVL 4

Author Comment

by:JackHodson
ID: 24785779
Thank you very much for your help. Exactly how I wanted it.

Regards,
Jack
0
 
LVL 4

Author Comment

by:JackHodson
ID: 24793560
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
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24793777
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
 
LVL 30

Expert Comment

by:IanTh
ID: 24793888
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
 
LVL 4

Author Comment

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

Jack
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question