Positioning problems?

HTML & CSS
1

My client’s web page is having positioning problems. If you click on the HTML and CSS link below, you will see the problems the web page is having, and if you click on the other link you will see the way the web page should look. Trying to solve the positioning problems is starting to give me a headache, so that is why I am hoping that someone in the SitePoint CSS forum can help. Please help me solve the problems my client’s web page is having.

The way the website should be

HTML and CSS

Thanks in advance.

2

Thanks, everyone for your help, the positioning problem has been solved now. After removing the absolute positioning the problem was solved.

3

Rayzur is right you need to get rid of the absolute position. I would as well add a 100% height to the wrapper. To do so start your styles with:


html, body{
height: 100%;
}

And in your wrapper add:


min-height: 100%; height: auto !important; height: 100%;

To push the footer realy to the bottom of the page do the following:

Give the footer a height for example 40px. create another css rule (.push) with the following: height: 40px; clear: both; Place this rule at the bottom of your wrapper like:

<div class=“push”></div>
</div><!-- end of wrapper –>

and in your wrapper add a negative bottom margin( same height as the footer) so margin-bottom: -40px;

4

You need to remove the absolute positioning from col2. AP always wins out over a float, but you do not need to AP the column in this case. Absolute positioned elements are removed from the normal page flow, that is why the footer is underneath the right column.

If you need to fine tune the col2 location then use margins. If you use a right margin along with float:right then IE6 will need display:inline to fix the double margin bug.

.col2 {
    border-left: 16px #115509 solid;
    float: right;
    width: 324px;
[COLOR=Red]   /* position: absolute;
    left: 559px;*/[/COLOR]
}