[Solved] White space left in the page depending how elements are positioned

[mikeyp]

Hi

I’ve a problem with white space left in the page depending how elements are positioned. I’ve been trying to solve this for a while and read a lot of info but cannot find a solution of my page, so thought I’d ask the experts….

The test page can be found here.

Below is an excerpt from the CSS causing which I think is causing the issue. I’m basically trying to move the navigation bar over the background image, so have used top: -350px; within #navigation to move it up. I’ve also done the same for the ‘Essentials’ menu with a top: -250px; for #essentials.

If I don’t then add margin-bottom: -320px; in the main text area (called #cms) I get lots of white space under the header image. If I do add it (as in the example link above) I get which space below the footer.

So – I’d like to remove the white space under the footer or have a better solution to postion the navigation and essnetials menu over the header without causing white space.

#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:0px;
padding-bottom:00px; /* Height of the footer element */
}
#innercontentmiddle {
position: relative;
background-color: #ffffff;
margin: 0 auto;
padding-left:10px;
padding-right:10px;
left:-130px;
width: 710px;
}

/* header */
#header {
background:url(../images/header.jpg) no-repeat;
height:330px;
}

#navigation {
position: relative;
top: -350px;
}

#cms {
position: relative;
top: -310px;
margin-bottom: -320px;
font-size:12px;
line-height:14px;
color: #036087;
}

#essentials {
position: relative;
top: -250px;
left: 720px;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color: #ffffff

…… and on to footer…

/* footer /
#footer {
background:url(../images/bg-footer.png) repeat-x;
width:100%;
height:130px; / Height of the footer element – correspond with content setting*/
position:relative;

}

Thank you in advance for any replies.

Mike

[Paulie_D]

#navigation {
position: relative;
top: -350px;
}

You really shouldn’t need to be moving elements like this except for specific effects.

If you are using this to generally position things you need to review your layout methods.

Margins & Padding should, generally, be used for spacing.

As for the navigation divs, try putting them inside the header div….then you don’t need to position it like that.

Etc.

[mikeyp]

Hi Paulie_D

Many thanks for your reply. Your comments make a lot of sense. I’ve moved the navigation within the header and that’s sorted. Seems so obvious now.

kind regards
mike

[Author]

Posts