Solved

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

Posted on 2009-06-30
17
429 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
  • 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:
renazonse 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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:renazonse
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:renazonse
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:renazonse
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now