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>
