Taking exactly 29px off of the top of my div without moving it down?

I have a website layout consisting of 4 divs.

<div class="global">
<div class="content">
</div>
<div class="top">
</div>
<div class="footer">
</div>
</div>

the has the following style applied

div.top{
position:fixed;
top:0px;
width:100%;
height:28px;
background-color:rgb(55,55,55);
border-bottom:1px solid black;
}

the has the following style applied

div.footer{
position:fixed;
float:right;
bottom:0px;
left:87.5%;
border:1px solid:black;
border-bottom:0;
}

and the has this

div.content{
position:absolute;
bottom:0;
top:28px;
width:100%;
background:transparent;
margin:auto;
padding:0;
}

the problem I am having is with the content div, I want it to start directly below the top and continue down the rest of the page, however it goes over the bottom of the page by exactly however many px I set the position of top too. Now as I'm using px for the size of the top, I can't apply a percentile, so what would be the best way of doing this using only css.

The website I need this for is http://www.andysinventions.info/test/ and the problem can be seen on the tab labelled "Forums"

tl;dr how can I stop my div going over the page boundaries?

2012-04-04 19:21
by Andrew Fairbairn

Andrew,

After looking over the answers (which are correct for the most part) and your site - I noticed you are using Iframes. In the year of 2012, iframes are a thing of the past as a design feature, only to be used as 3rd party additions like offsite widgets and feeds (or sandboxing).

You need to structure your page like this for what you are going for:

<!doctype html>
<html>
  <head>
    <title>A title</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <ul id="menu">
      <!-- menu content here -->
    </ul>
    <!-- Actual page content here -->
  </body>
</html>

In the style.css have these rules:

body { margin: 28px 0 0; }

ul#menu {
  position: absolute;
  top: 0;
  left: 0;
  }

This should achieve what you are looking for using modern technique.

2012-04-04 19:57
by Nick McCormack

Thank you very much, I know iframes are years old and I really wanted to use something else, I just couldn't find the right thing, though I still need to be able to set a target in the site for the pages to load in, can this be done, or would I need to have the menu on every page - Andrew Fairbairn 2012-04-04 20:04

Usually you just include('header.php'); at the top of all your files, assuming you aren't using an autoloader or a framework that can do it for you. Header.php would include your to your tag usually - Nick McCormack 2012-04-04 20:07

I just realised you are doing straight HTML for this site, you might want to look into using a little PHP. Your server probably supports it as I can see you are also running Apache, and those two are often paired - Nick McCormack 2012-04-04 20:08

My server can handle php, however I really don't know where to start when learning to use it - Andrew Fairbairn 2012-04-04 20:10

You don't need much other than to rename your files to .php, and put at the top of your pages :). PHP as a scripting language (the basics) is very easy to pick up in a day or so - give it a whirl - Nick McCormack 2012-04-04 20:12

Okay, thanks, I'll go and give it another look and hopefully understand it - Andrew Fairbairn 2012-04-04 20:17

instead of absolute position and top, try margin-top:28px:

div.content{
    bottom:0;
    width:100%;
    background:transparent;
    margin: 28px auto 0 auto;
    padding:0;
}

2012-04-04 19:28
by Gavriel

This is happening because you are using top:28px; to move down the top bar. Instead, you should use a margin-top:28px; and take out the absolute positioning.

div.content{
    width:100%;
    background:transparent;
    margin:28px auto 0 auto;
    padding:0;
}

2012-04-04 19:30
by Drew

Never double up on styles like that... use margin: 28px auto 0; like Flöcsy poste - Nick McCormack 2012-04-04 19:32

I agree, I went ahead and changed the answer. I had just pasted from my Chrome developer tools. Thanks for pointing that out - Drew 2012-04-04 19:37

I'm still having the same problem that I'm losing 28px on the overscroll of the page - Andrew Fairbairn 2012-04-04 19:38

Looks OK to me. What browser are you using - Drew 2012-04-04 19:40

Andrew, do a hard refresh, the site looks fine to me - Nick McCormack 2012-04-04 19:40

just tried it in a few browsers, same problem I'm still losing 28px at the bottom of the page. If you look at the scrollbar to the right you can see it doesn't quite end - Andrew Fairbairn 2012-04-04 19:43