PDA

View Full Version : Absolute positioning within Relative parent



waldermort
Oct 11th, 2009, 08:27 AM
There must be a way to do this but after fruitless hours on google I am unable to find a solution.

I have a container div with position:relative and overflow:hidden and up to 2 children with position:absolute; Trouble is they will not display without the containers height being set. Now I do not know the height of the container so I'm unable to hard-code it.

All the solutions I have found is to float the children and relativley position them. This doesn't work for me because if the width of the container is less than the width of the two floaters, that second floater will be positioned under the first (as in a normal flow ). I want the two children to remain horizontaly aligned But the overflow to be out of view.

I'm trying to implement a coda style scroll, but unlike all the examples, once a page is out of view it's removed from the DOM. I.e. the effect I want is to scroll new data into a div on a timed loop. So an inner container is not the way to go since it would have to be repositioned each time a scroll is complete.

Is there any way I can achieve this? If it helps it only needs to work in IE (for a sidebar gadget).

Excavator
Oct 11th, 2009, 09:12 AM
Hello waldermort,
Can we see some code? Do you have a test site up?

edit: I've never messed with ap much so I've never run into this. Here is some code to test with -
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #ccc;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 400px;
margin: 20 auto;
background: #CF0;
position: relative;
}
#one {
width: 150px;
height: 200px;
background: #0f0;
position: absolute;
top: 20px;
left: 20px;
}
#two {
width: 150px;
height: 250px;
background: #f00;
position: absolute;
top: 20px;
left: 190px;
}
</style>
</head>
<body>
<div id="container">
<div id="one"></div>
<div id="two"></div>
<!--end container--></div>
</body>
</html>

waldermort
Oct 11th, 2009, 11:38 AM
Hello waldermort,
Can we see some code? Do you have a test site up?

edit: I've never messed with ap much so I've never run into this. Here is some code to test with

Thanks for the example, however when applying overflow:hidden to the container things get messed up.

The only solution that gives me the desired effect is to add an inner container and float:left the elements within that. The problem doing it this way is that when the scroll is complete, I want to remove the leftmost node, so I have to reposition the inner container.

My idea is, if there's a simple solution use it because it usually means less things will go wrong.