Please help me with footer problem

June 25, 201016 yr

Hi guys,

This is the first time I have designed a site that doesn't have a fixed height & that is a 3 column layout & I am having problems positioning a footer at the bottom of the page.

The content is going to vary as sometimes the main content area may have more content than the right side column & other times the right side column may have more content than the main area.

I have positioned the right side & main menu with the absolute positioning property & the main content area (middle) with the relative positioning property.

Both the CSS & html code is as follows & any advice would be appreciated: -

My css code is as follows: -

/* Technixis Fitness CSS Sheet */

/* Main body area */

body {

width: 960px;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: 0;

padding: 0;

border: none;

font-family: georgia, helvetica, sans-serif;

font-size: 1em;

background-color: #ffffff;

}

/* Title header */

#header {

position: relative;

width: 960px;

height: 400px;

margin-top: 0;

margin-right: 0;

margin-bottom: -100px;

margin-left: 0;

border: none;

z-index: 1;

}

/* Main content area */

/* Wrapper to hold the main content */

#mainwrapper {

position: relative;

width: 960px;

margin: 0;

padding: 0;

border: none;

z-index: 1;

}

#maincontentwrapper {

position: relative;

width: 520px;

margin-top: 10px;

margin-right: auto;

margin-bottom: 10px;

margin-left: auto;

padding: 0;

border: none;

background-color: ffffff;

z-index: 1;

}

/* Main content header */

#maincontentheader {

position: relative;

width: 520px;

height: 92px;

margin: 0;

padding: 0;

z-index: 1;

}

/* Main content text area */

/* Unlimited height to expand with content */

#maincontent {

position: relative;

width: 440px;

margin: 0;

padding-top: 0;

padding-right: 40px;

padding-bottom: 10px;

padding-left: 40px;

background-position: right;

background-repeat: repeat-y;

border: none;

z-index: 1;

}

/* Main content bottom area */

#maincontentbottom {

position: relative;

width: 520px;

height: 102px;

margin: 0;

padding: 0;

border: none;

z-index: 1;

}

/* Section on the right to hold extra info */

/* Right side div wrapper to contain the right side div */

#extradivwrapper {

position: absolute;

top: 100px;

right: 10px;

width: 220px;

margin: 0;

padding: 0;

border: none;

z-index: 0;

}

/* Extra div header */

#extradivheader {

position: relative;

width: 220px;

height: 59px;

margin: 0;

padding: 0;

border: none;

z-index: 0;

}

/* Extra div main content */

/* Unlimited height to expand with content */

#extradiv {

position: relative;

width: 220px;

margin: 0;

padding: 0;

background-position: right;

background-repeat: repeat-y;

border: none;

z-index: 0;

text-align: center;

}

/* Extra div bottom area */

#extradivbottom {

position: relative;

width: 220px;

height: 63px;

margin: 0;

padding: 0;

border: none;

z-index: 0;

}

/* The main menu section */

/* Wrapper to hold the main menu */

#menuwrapper {

position: absolute;

top: 100px;

left: 10px;

width: 220px;

margin: 0;

padding: 0;

border: none;

z-index: 2;

}

/* Main menu header image */

#menuheader {

position: relative;

width: 220px;

height: 59px;

margin: 0;

padding: 0;

border: none;

z-index: 2;

}

/* The area where the menu options will be */

/* Unlimited height to expand with number of options */

#menu {

position: relative;

width: 220px;

margin: 0;

padding: 0;

background-position: right;

background-repeat: repeat-y;

border: none;

z-index: 2;

}

/* Main menu bottom image */

#menubottom {

position: relative;

width: 220px;

height: 63px;

margin: 0;

padding: 0;

border: none;

z-index: 2;

}

#footer {

position: relative;

width: 960px;

height: 300px;

margin: 0;

padding: 0;

border: none;

}

/* Main paragraph style */

p {

margin-top: 0;

padding: 0;

text-align: justify;

line-height: 1.5em;

color: #979899;

}

/* Heading styling */

#extradiv h1 {

width: 170px;

margin: 0;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

font-size: 0.8em;

color: #ffffff;

text-transform: capitalize;

background-color: #f2a030;

z-index: 0;

border: none;

}

/* Main menu styling */

#menu ul {

margin: 0;

padding-top: 0;

padding-right: 0;

padding-bottom: 0;

padding-left: 20px;

list-style-image: url('Images/xx.png');

list-style-position: inside;

border: none;

text-transform: capitalize;

font-size: 0.75em;

}

#menu ul li {

margin: 0;

padding-top: 10px;

padding-right: 0;

padding-bottom: 10px;

padding-left: 0;

border: none;

color: #979899;

}

/* Image styling */

#extradiv img {

margin-top: 10px;

margin-left: 0;

margin-bottom: 10px;

margin-right: 0;

padding: 0;

border: none;

}

The HTML is as follows: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Technixis Fitness- Innovative fitness products</title>

content="text/html; charset=utf-8" />

</head>

<body>

</div>

</div>

<p>

Technixis Fitness was created for the passion it's founder has for fitness & innovation. The

company focuses on designing, developing & marketing new & innovative efficient fitness

products for both home fitness consumers & commercial clients (health clubs, hotels, etc).

There are many firms supplying fitness products out there & Technixis Fitness is easily

differentiated from those organisations by our innovative concepts, we therefore have come to existance

to bring excitement & revolutionise the fitness products industry.

</p>

<p>

Technixis Fitness believes in striving to find effective, effecient & innovative products to

optimize training results, whilst minimizing risk of injury, training plateau & keeping

exercisers constantly challenged, entertained & focused: That is our mission.

</p>

<p>

Our website is currently under development but please feel free to see our exciting new

product due for launch very soon on the right in our new products section.

</p>

</div>

</div>

</div>

</div>

<h1>

speedball abs ripper

</h1>

<a href="http://theabsripper.com"><img'>http://theabsripper.com"><img'>http://theabsripper.com"><img src="Images/Abs-Ripper_Home-Foldable-Version_Speedball.png" width="150" height="179" alt="The abs ripper with speedball"/></a>

<h1>

punchbag abs ripper

</h1>

<h1>

trampoline abs ripper

</h1>

</div>

</div>

</div>

</div>

<ul>

<li>our story</li>

<li>innoproducts</li>

<li>innocontact</li>

<li>personal training zone</li>

<li>partnerships</li>

<li>feedback</li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

Thanks.

Lee.

June 26, 201016 yr

Author

Any advice on this at all would be appreciated.

If you need more info let me know.

June 26, 201016 yr

You have a style for #footer but there's no footer div in the html markup.

If you add it after the #mainwrapper closing tag it will show below everything else:-

</div> <!--End of mainwrapper div-->

<div id="footer">
<p>Footer div</p>
</div>

</body>
</html>

That will work provided the three main containing divs have no position or position: relative. Your #menuwrapper on the left and #extradivwrapper on the right have position: absolute and these will not force the footer below them if either has more content than the other columns, so it may be better to have three main column divs with float: left; to sit side by side and without position: absolute. Position: absolute divs are outside the normal flow so they don't take any notice of the position (height) of other divs.

June 26, 201016 yr

Author

I have tried the float property as well for the extra div on the right & it still sits outside the normal flow.

The only option I can think of is by putting the footer at the bottom of the main content div.

June 26, 201016 yr

This is what I have using three floated divs and clear: both in the footer to clear the floats. I haven't got your images so I used background colors.

http://www.wickham43.com/forumposts/lee100626-2.html

CSS file http://www.wickham43.com/forumposts/leetechnixis100626-2.css

If you need to edit the top positions use margin-top because the divs aren't position: absolute now.

I repeated the content in the right #extradivwrapper div so that you can see that the footer stays below it.

June 26, 201016 yr

Author

Wickham thanks very much for your help it has worked a treat.

If you were in the same room I would by you a beer.

Thx again.

Lee.

Please help me with footer problem

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)