Home/ Questions/Q 7757575
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:07:56+00:00

I have a website layout consisting of 4 divs. <div class=global> <div class=content> </div>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0