Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body, div {
width: 774px;
margin-left: auto;
margin-right: auto;
}
div.header{
width:774px;
border:1px solid;
border-bottom:none;
}
div.main{
width:774px;
border-left:1px solid;
border-right:1px solid
}
div.footer{
width:774px;
border:1px solid;
border-top:none;
}
div.contentLeft{
position: relative;
width: 238px;
height: 100px;
background: black;
top: 2px;
left: 2px;
}
div.contentRight{
position: relative;
width: 528px;
background:blue;
height: 100px;
top: 2px;
bottom: 2px;
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<div class="header"><img src="images/bovenbalk3.gif" width="774" height="75"></div>
<div class="main">
<div class="contentLeft">
</div>
<div class="contentright">
</div>
</div>
<div class="footer"><img src="images/onder.gif" width="774" height="41"></div>
<body>
</body>
</html>
english: not important :D
Relative positioning places items in the normal flow and then MOVES them the amount specified by the top, left, bottom, and right properties. The numbers given to these four properties are 'offset' values; they equal the number of pixels the entire element is shifted away from its original position.
Absolute positioning, on the other hand, removes elements from the flow and places them in a specific location on the page, dictated by the top, left, bottom and right properties. In this case, the numbers represent a specific pixel location within the specified container.
Elements cabn be placed side-by-side with absolute positioning by virtue of their removal from the flow, so it is actually absolute positioning you want here.
If you change the position: relative in #contentLeft and #contentRight to position:absolute, then change bottom: 2px to right: 2px, add a position: relative to #main, you should get what you want, provided your numbers add up right...
#main {
position: relative;
}
#contentLeft{
position: relative;
top: 2px;
left: 2px;
}
#contentRight{
position: relative;
top: 2px;
right: 2px;
}
You'll need to add back in your background, height and width properties
The position: relative on #main makes it so the absolutely positioned elements place themselves relative to the #main <div>. The top and left settings place that div 2px from the left and 2px from the top of #main. Vice versa on #contentRight. As long as the two divs are a pixel perfect fit inside of #main, your layout will appear as you wish (if the numbers are wrong they may overlap).
Rather than innundate you with too much information, I'll just say that there is a second (I think superior) way to accomplish your desired layout, using the float property. If you're interested in the explanation of it, let me know. Otherwise, try the above and see if it's what you had in mind.
Good luck,
cEM
[edited by: createErrorMsg at 2:28 am (utc) on Oct. 31, 2004]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
body{
width: 774px;
margin: 0 auto;
}
div#header{
width:100%;
border:1px solid black;
}
div#main{
position:relative;
padding:0;
border:1px solid red;
width:100%;
}
div#footer{
width:100%;
border:1px solid black;
}
div#contentLeft{
position: absolute;
width: 238px;
height: 100px;
background: black;
left:4px;
top:2px;
}
div#contentRight{
position: relative;
height:100px;
width: 528px;
left: 242px;
background: blue;
margin:2px 0;
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<div id="header"><img src="images/bovenbalk3.gif" width="774" height="75" /></div>
<div id="main">
<div id="contentLeft">
</div>
<div id="contentRight">
</div>
</div>
<div id="footer"><img src="images/onder.gif" width="774" height="41" /></div>
<body>
</body>
</html>
