Space problem between content divs and footer or below footer

HTML & CSS
1

Hi,

I am creating a website for a local bellydance club, and I have an issue with the footer.

The problem is that there is a big space between the footer and the content divs, which I could only solve with setting a huge(about 500px) negative top margin for the footer.
It looks nice this way in Safari, Opera and Firefox, but there is a big white space at the bottom in IE. If I delete the negative margin, then the white space disappears in IE, and everything looks nice except the big space between the content divs and the footer.
I’ve setup a container div which holds the whole design, and this is the div whose background shows in that big space between the content and the footer.

Any ideas about how to solve this?

Your help would be appreciated very much!

Best Wishes,
Allanon

2

Sounds like you’ve used the position property.
How about a link or code used?

3

This is the html:

<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>She Salgótarján</title>
<link href=“main.css” rel=“stylesheet” type=“text/css” />
</head>
<body class=“oneColElsCtrHdr”>
<div class=“dropshed”>
<div id=“container”>
<div id=“header”>
<div class=“menu”>Menü1 Menü2 Menü3 Menü4 Menü5 Menü6 Mneü7 Menü8</div>
<!-- end #header –>
</div>
<div id=“mainContent”>
<div class=“video”>Video</div>
<div class=“hirek”>
<h3>Hírek</h3>
</div>
<div class=“bemutatkozas”>
<h3>Kedves Látogató!</h3>
<p id=“idezet”><em>„Hastánc. A Nö.</em><br />
<em>Ez a tánc rólunk szól. A Nőről. Több ez, mint csábítás. Segítségével feltárul számunkra az igazi világ; esélyt adva arra, hogy megtaláljuk magunkban a szellemet, a kreativitást, a fizikai szellemi és érzelmi energiákat. A hastánc önkifejezés, fantázia, játékosság, a testünk feletti kontroll képessége. Amikor táncolunk az életet ünnepeljük, annak minden vadságával, végletességével és végtelenségével együtt.</em><br />
<em>Köszönjük, hogy velünk ünnepelnek!" <br />
<br />
(Sakinah)</em></p>
<p> Köszönjük, hogy megtiszteltél érdeklődéseddel és örömmel üdvözlünk a honlapunkon!<br />
<br />
Ezeken az oldalakon bepillanthatsz a Sakinah Hastánc Egyesület mindennapjaiba és ünnepeibe.<br />
<br />
A hastánc varázslatos világán keresztül megismerkedhetsz az egyesület munkájával, szellemiségével és tagjaival.<br />
<br />
Sokan sok színűek vagyunk, de összeköt minket a hastánc és a tánc szenvedélyes szeretete.
Örömmel tárjuk Eléd ezeket az oldalakat abban a reményben, hogy tetszik amit látsz és hamarosan Te is velünk táncolsz, boldogan és mosolyogva… <br />
<br />
Kellemes nézelődést!<br />
<br />
<strong>S.H.E.</strong></p>
<p id=“push”>.</p>
</div>
<div id=“footer”>
<div class=“bottom_menu”>Menü1 Menü2 Menü3 Menü4 Menü5 Menü6 Menü7 Menü8</div>
<!-- end #footer –>
</div>
</div>
<!-- end #container –>
</div>
</div>
</body>
</html>

This is the css:

@charset “UTF-8”;
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFF;
}

.oneColElsCtrHdr #container {
background: #fcfbc3;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-left: auto;
width: 960px;
overflow: hidden;
}

.dropshed {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 1000px;
background-image: url(images/dropshed.png);
background-repeat: repeat-y;
background-position: center;
background-color: transparent;
}

.oneColElsCtrHdr #header {
height: 380px;
width: 960px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #fcfbc3;
background-image: url(images/home1_kesz_01.png);
background-repeat: no-repeat;
background-position: center top;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.menu {
height: 60px;
width: 450px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: transparent;
background-repeat: no-repeat;
position: relative;
top: 250px;
right: -20px;
font-family: “Monotype Corsiva”, Georgia, Arial;
font-size: 18px;
}
.oneColElsCtrHdr #mainContent {
width: 960px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #fcfbc3;
margin-top: 0px;
}
.video {
height: 240px;
width: 320px;
position:relative;
left: 50px;
top: 30px;
background-color: #fcfcd9;
font-family:“Monotype Corsiva”, Georgia, Arial;
font-size:14px;
}

.hirek {
height: 350px;
width: 320px;
position:relative;
left: 50px;
top: 50px;
background-color: #fcfcd9;
font-family:“Monotype Corsiva”, Georgia, Arial;
font-size:14px;
background-image: url(images/images/Video_design_02.png);
background-repeat: no-repeat;
background-position: left bottom;
}

.hirek h3 {
background-image:url(images/images/Video_design_01.png);
background-position:left;
margin-top: 0;
padding-bottom:3em;
background-repeat:no-repeat;
top: 0px;
margin: 0px;
font-family:“Monotype Corsiva”, Georgia, Arial;
font-size: 24px;
font-weight: bold;
background-image: url(images/images/Video_design_01.png);
background-position: left top;
text-align: center;
padding-top: 2em;
padding-right: 0em;
padding-left: 0em;
}

.bemutatkozas {
background-color: #fcfcd9;
left: 410px;
position: relative;
background-image: url(images/home1_kesz_07.png);
background-repeat: no-repeat;
background-position: left bottom;
width: 501px;
word-spacing: 1em;
vertical-align: middle;
text-align: justify;
text-indent: 0em;
white-space: normal;
font-family: “Monotype Corsiva”, Georgia, Arial;
top: -560px;
}

.bemutatkozas p {
padding: 1em;
font-family:“Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-size:14px;
clear:both;
}

.bemutatkozas #idezet {
padding: 1em;
font-family:“Times New Roman”, Times, serif;
font-size:14px;
clear:both;
}

.bemutatkozas #push {
padding-bottom:15em;
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:14px;
clear:both;
color: #fcfcd9;
}

.bemutatkozas h3 {
background-image:url(images/home1_kesz_04.png);
background-position:left;
padding-bottom:2em;
background-repeat:no-repeat;
font-family:“Monotype Corsiva”, Georgia, Arial;
font-size: 24px;
font-weight: bold;
padding-top: 3.4em;
padding-right: 3em;
padding-left: 3em;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.oneColElsCtrHdr #footer {
width: 960px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
height: 340px;
background-color: #fcfbc3;
background-image: url(images/home1_kesz_03.png);
background-repeat: no-repeat;
background-position: center bottom;
position:relative;
}
.bottom_menu {
height: 60px;
width: 450px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: transparent;
background-repeat: no-repeat;
position: relative;
top: 210px;
right: -440px;
text-align: justify;
vertical-align: bottom;
font-family: “Monotype Corsiva”, Georgia, Arial;
font-size: 18px;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs /
padding: 10px 0; / padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

Thanks for the help in advance!

4

try this, if it doesn’t work delete it :lol:

css:

#footer{
clear:both;
overflow:hidden;
width:1024px; —> or your width
height:auto;
}

Please let us know

5

It didn’t work sorry. But thanks for the help anyway!

Just to clarify, the problem is the big space between the content divs and the footer, without the negative margin trick I’ve mentioned.

6

Hi, is there a link to this online? I’m much too lazy to copy and paste all that code (which I never seem to see with local copys anyway lol).

Edit:

Is there a doctype with your code?

7

Ok. I uploaded it to my VPS.

You can view it here:
matekaszas.com/SHE/home.html

This is only the homepage. This will be a CMS Made Simple template so the placeholder divs on the left are just for future content.
Again the problem is the space between the biggest content div (bemutatkozas) and the footer which is around the same amount with which the bemutatkozas div is positioned negatively to the top(around 500px).

8

Hi, when you do top:-560px on ".bemutatkozas"the browser still thinks it’s in its’ respective place. So that is causing the space. Set that top to 0 and left to 0 and add float:right; to it, and on “.hirek” add float:left;

Use margins to adjust (PS on .hirek set left to 0 also)

9

Thanks Man! It worked! I had to set the content divs to static, delete the positioning values as you’ve suggested, create the floating, and I made adjustments with margins.

There is one more small IE 6 specific problem though. If the margin is adjusted on the same side of the div where it floats to, then the margin is doubled in IE6. So I reduced the left and right margins on the content divs (about 50%), but this way the margins look kinda small in Safari, Firefox and Opera.

Any suggestions or magic tricks on this? :slight_smile:

Thanks again!

10

Hi, this is the IE6 double float margin bug, I thought I should have mentioned the fix in the last post but thoght not to.

Add display:inline; to the floated elements :slight_smile:

11

Thanks again! It worked of course! :slight_smile:

12

You’re welcome :).