Need border around entire page, with absolute positioning

**jeromeramone** · April 17th, 2008, 11:36 AM

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>

**fasterthanlight™** · April 17th, 2008, 11:49 AM

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

**jeromeramone** · April 17th, 2008, 01:12 PM

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

Originally Posted by fasterthanlight™

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