Jump to content

Archived

This topic is now archived and is closed to further replies.

acdx

DIV positioning relative to parent div

Recommended Posts

I have a container div with specified width and height, inside which I have a few other divs, with specified dimensions as well for that matter. I'd like to be able to position the child divs freely relative to the upper left corner of the parent div. Sounds really simple, but I haven't found a way to do it. position: absolute won't do, as I need to be able to position the divs relative to the parent div, not the page bounds.

Share this post


Link to post
Share on other sites
Without really seeing what you intend, it is hard to guess what you are going for. You always, of course, have position:relative. This places the sub divs in the actual flow of the body html.

Also, have you tried just using floats?

#Parent {
float:left;
etc., etc.
}
.child1 {
Float:left;
etc., etc.
}
.subchild1 {
Float:left;
etc., etc.
}

[code]<div id="Parent">
<div class=".child1">content of one child</div>
<div class=".subchild1">content of subchild</div>
//*close Parent div *//</div>[/code]

Share this post


Link to post
Share on other sites
Floats interact with eachother and thus position: relative won't do it.

I want to do this: [url=http://acdx.net/divs.php]acdx.net/divs.php[/url] (see source)

But specify the position of the child divs relative to the upper left corner of the parent div instead of the document bounds.

Share this post


Link to post
Share on other sites
this should be what position: absolute SHOULD do.

I am sure I read somewhere (a comment by some individual) that the absolute should work on the basis of the top left of the parent element being 0,0 - unfortunately I think most browsers reference the top left of the window as 0,0 - pity if that is the case as an opportunity has been lost.

Share this post


Link to post
Share on other sites
Ahh, now I understand what you want. Instead of relative to the top and left of the browser "window", you want to specify the left/right relative to the parent. So you can position them on the screen without being constrained by the screen x, y, z.

There's a trick to this that I stumbled onto at csszengarden (in one of the entries) a while ago.

You want to FIRST, obviously, specify a proper doctype and use proper markup structure.

But the real trick is to set a "position:relative" container in your body, with desired width. I but a border on the container to give you an idea of how the box divs are relative to the container. I then gave the parent box div a left and top (again just to show how it positions relative to the container. You can place these boxes anywhere relative to the parent box).

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin:0;
}
#container {
display: block;
position: relative;
border: 11px  #0A0D12 solid;
margin: 0px;
margin-left:auto;
margin-right:auto;
width: 527px;
height:400px;
voice-family: "\"}\"";
voice-family:inherit;
width: 505px;
}

div.box {
border: 1px solid black;
position: absolute;
left:140px;
top:100px;
}

-->
</style>
</head>

<body>
<div id="container">control container


</style>

<div class="box" style="width: 300px; height: 300px;">box

<div class="box" style="width: 50px; height: 50px; top: 100px; left: 100px;">box1</div>
<div class="box" style="width: 50px; height: 50px; top: 120px; left: 130px;">box2</div>
<div class="box" style="width: 50px; height: 50px; top: 160px; left: 150px;">box3</div>

</div>
</div>
</body>
</html>[/code]

Hope this was what you were looking for. Things like this usually are done usinga trick someone somewhere in a forum knows.

Dave

Share this post


Link to post
Share on other sites
Thank you, I'll have to try that out.

Obviously I do proper markup, the demo file was just an "excerpt".

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.