acdx Posted October 6, 2006 Share Posted October 6, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/ Share on other sites More sharing options...
dbrimlow Posted October 8, 2006 Share Posted October 8, 2006 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] Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/#findComment-105721 Share on other sites More sharing options...
acdx Posted October 8, 2006 Author Share Posted October 8, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/#findComment-105835 Share on other sites More sharing options...
ToonMariner Posted October 9, 2006 Share Posted October 9, 2006 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. Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/#findComment-106047 Share on other sites More sharing options...
dbrimlow Posted October 9, 2006 Share Posted October 9, 2006 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 Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/#findComment-106512 Share on other sites More sharing options...
acdx Posted October 11, 2006 Author Share Posted October 11, 2006 Thank you, I'll have to try that out.Obviously I do proper markup, the demo file was just an "excerpt". Quote Link to comment https://forums.phpfreaks.com/topic/23221-div-positioning-relative-to-parent-div/#findComment-107615 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.