Jump to content

DIV positioning relative to parent div


acdx

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.
Link to comment
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]
Link to comment
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.
Link to comment
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.
Link to comment
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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.