# Need border around entire page, with absolute positioning

**URL:** https://forum.kirupa.com/t/need-border-around-entire-page-with-absolute-positioning/257838
**Category:** Uncategorized
**Created:** [April 17, 2008, 3:36pm UTC](https://forum.kirupa.com/t/need-border-around-entire-page-with-absolute-positioning/257838 "2008-04-17T15:36:06Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![jeromeramone](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jeromeramone/32/3405_2.png) [@jeromeramone](https://forum.kirupa.com/u/jeromeramone)
#### Post date: [April 17, 2008, 3:36pm UTC](https://forum.kirupa.com/t/need-border-around-entire-page-with-absolute-positioning/257838/1 "2008-04-17T15:36:06Z")

</div>

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](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)”\>  
\<html xmlns=“[http://www.w3.org/1999/xhtml](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\>
