The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 3 of 3

Thread: Need border around entire page, with absolute positioning

  1. #1

    Need border around entire page, with absolute positioning

    Can someone suggest a solution or hack to get the "wrapper" div border to wrap around the two absolutely-positioned column divs? I know the absolute divs are out of the page flow, but maybe there's something that can be done. The border can either go all the way to the bottom of the page, or snugly wrap around the header & columns.

    The reason I can't use floats is that my actual code is much more complicated and I'm somewhat new to this, and I've tried and tried with floats and the problems are legion, whereas this way everything works great, EXCEPT this one problem.

    Thanks in advance.......



    Here's the simplified code:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    #wrapper {
    width: 90%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
    border: solid #000 1px;
    }

    #header {
    background-color: #CCCCCC;
    }

    #leftcolumn {
    position: absolute;
    width: 248px;
    top: 30px;
    background-color: #D1E7CF;
    }

    #rightcolumn {
    position: absolute;
    width: auto;
    top: 30px;
    left: 260px;
    background-color: #CED9E1;
    }
    </style>

    </head>

    <body>

    <div id="wrapper">
    <div id="header">HEADER</div>
    <div id="leftcolumn">LEFT COLUMN</div>
    <div id="rightcolumn">RIGHT COLUMN</div>
    </div>

    </body>
    </html>

  2. #2
    wrapper would need to inherit the height of your absolutely positioned divs which is impossible because they are absoluted

    otherwise you need to define a height for #wrapper which won't do anything for you if your content's height is not known / changes


    but if you switch to floats I guarantee I can help you squash any bugs, no matter how complicated the real code is
    Last edited by fasterthanlight™; April 17th, 2008 at 11:52 AM.

  3. #3

    vertically-expanding border around floating divs

    You asked for it!

    Code is attached. It actually isn't too bad after I stripped out everything extraneous. I switched to floating and had some success. The border will expand to fit the left column, just not the right one. You'll see that the right border extends past the bottom of the border.

    This only needs to work in IE 7 & Firefox.

    Thanks Mr. Light!

    Jerome



    Quote Originally Posted by fasterthanlight™ View Post
    wrapper would need to inherit the height of your absolutely positioned divs which is impossible because they are absoluted

    otherwise you need to define a height for #wrapper which won't do anything for you if your content's height is not known / changes


    but if you switch to floats I guarantee I can help you squash any bugs, no matter how complicated the real code is
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012