Layout Problem (without using tables)

Forum Moderators: not2easy

Message Too Old, No Replies

Layout Problem (without using tables)

yhook7

4:18 am on Mar 22, 2009 (gmt 0)

I know that there is lots of info on the web regarding 100% height layouts. I understand the basics of this, but my case scenario doesn't seem to work no matter what I try.

Basically, I would like all the content in my page to go inside a "box" that will expand the full height (and 760px of width), and also have a space of 15px above and below this box. This box also has a rounded-type-border which is made up of images [using divs and CSS backgrounds].

So far I got this working, but no matter what I try I can't get rid of the scroll bar.

Any help would be appreciated,

Thank You.

P.S. I managed to get this working with tables, but I would really prefer not to go with that route. It's only a last resort....

swa66

2:48 pm on Mar 22, 2009 (gmt 0)

If you have a standards compliant browser, all you need is absolute positioning.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>untitled</title>
    <style type="text/css">
      * {
        padding:0;
        margin:0;
      }
      html {
        background-color: #ccc;
      }
      body {
        background-color: white;
        width: 760px;
        margin: 0 auto;
        position: absolute;
        top: 15px;
        bottom: 15px;
        left: 0;
        right: 0;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* CSS3 */
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>ipso</p>
  </body>
</html>

The rounded corners use proprietary pre-CSS3 tags for FF, safari and chrome. And have the CSS3 tag ready as well (that alone will make it bark while validating).

It doesn't behave well when it overflows, but anytime you talk about using the entire viewport you really need to think what you want to happen if the viewport is too small for your content.