Positioning Problem

brettj

10-27-2006, 05:49 AM

I thought I finally had a grasp of how relative and absolute positioning worked, then I stumbled upon this problem. How do I give to divs a relitive position when they share the same parent/container? The second one always get's pushed down. Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>
<style type="text/css">

#wrap {
width: 760px;
margin: auto;
}

#header {
background: #000;
width: 760px;
height: 250px;
}

#box1 {
background: #0000ff;
width: 150px;
height: 100px;
position: relative;
left: -200px;
}

#box2 {
background: #ff0000;
width: 150px;
height: 100px;
position: relative;
top: 10px;
left: 810px;
}

</style>
</head>

<body>
<div id="wrap">
<div id="header">
<div id="box1"></div>

<div id="box2"></div>
</div>
</div>
</body>
</html>

The red box should only be hanging 10px below the top of the black one. I don't want to use absolute positioning because it causes the appearance of the horizontal scroll bar on lower resolution screens. It should appear that both the red and blue boxes are not being fully displayed under 800x600 resolution (and no horizontal scroll bar to see the rest).

Hope that all makes sense. It seems like a simple problem that has an easy fix. I just don't know what it is and I couldn't find the answer on my own. Thanks for the help.

_Aerospace_Eng_

10-28-2006, 01:30 AM

It would appear that you are going for an overlapping effect. To do this you need to use absolute positioning. One problem you might have run into is the boxes not staying with the header. The solution to this is make the header position:relative;. An absolutely positioned element will use the nearest relatively positioned element as its reference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

#wrap {
width: 760px;
margin: auto;
}

#header {
background: #000;
height: 250px;
position: relative;
}

#box1 {
background: #00F;
width: 150px;
height: 100px;
position: absolute;
top: 10px;
left: -75px;
}

#box2 {
background: #F00;
width: 150px;
height: 100px;
position: absolute;
top: 10px;
right: -75px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="box1"></div>
<div id="box2"></div>
</div>
</div>
</body>
</html>

brettj

10-28-2006, 03:48 AM

I figured it out. I needed to use float: left on both boxes. Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>
<style type="text/css">

#wrap {
width: 760px;
margin: auto;
}

#header {
background: #000;
width: 760px;
height: 250px;
}

#box1 {
background: #0000ff;
width: 150px;
height: 100px;
position: relative;
left: -200px;
float: left;
}

#box2 {
background: #ff0000;
width: 150px;
height: 100px;
position: relative;
top: 10px;
left: 660px;
float: left;
}

</style>
</head>

<body>
<div id="wrap">
<div id="header">
<div id="box1"></div>

<div id="box2"></div>
</div>
</div>
</body>
</html>

Thanks for the help though. I'm sure that will clear up other problems in the future.