user1628340
user1628340

Reputation: 941

Positioning multiple nested divs relative to each other

I have an outer div, divs inside the outer div and divs inside these divs too. I want to position the innermost div wrt to its parent, the middle level div wrt to its parent i.e. outermost div. For just divs inside a div we ca achieve this using relative positioning for the parent div and absolute positioning for child divs. But how do we achieve it when we have more levels of nested divs?

I want to have predefined width for the innermost level divs and the other higher level divs should have their width and height to just fit their child divs. I have the following code, but it does not seem to work. The code is shown below:

<div class='list' id='list1' style='padding: 1px; border : 5px groove; position: relative; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
<div class='tuple tuple1' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
    <div class='elmnt elmnt2' id='elmnt2' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt3' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt4' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>
<div class='tuple tuple2' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
            <div class='elmnt elmnt2' id='elmnt6' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt7' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt8' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>
<div class='tuple tuple3' style='padding: 2px; border : 1px solid; position: absolute; min-width: 3px; width: auto; min-height: 3px; height: auto;' >
    <div class='elmnt' id='elmnt1' style='padding: 2px; border : 1px dotted; position: absolute; left: 6px; width: 100px;' >adasd</div>
    <div class='elmnt elmnt2' id='elmnt10' style='padding: 2px; border : 1px dotted; position: absolute; left: 112px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt3' id='elmnt11' style='padding: 2px; border : 1px dotted; position: absolute; left: 218px; top: 2px; width: 100px;' >asdasd</div>
    <div class='elmnt elmnt4' id='elmnt12' style='padding: 2px; border : 1px dotted; position: absolute; left: 324px; top: 2px; width: 100px;' >sadasd</div>
</div>

Upvotes: 3

Views: 16127

Answers (2)

ph33nyx
ph33nyx

Reputation: 301

Crazy question. Can you use unordered lists nested together instead?

If you set it within a parent container, that parent can be sized and positioned absolutely if that is required for the rest of your page, but you can float the line items that you want to position horizontally and not float the ones that you want to line up vertically. Just remember that floated items need to have position:relative and a width specified.

<div id="parentContainer">
<ul style="list-style-type:none;">
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 1</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 2</li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 3
    <ul style="list-style-type:none;">
        <li>subitem a</li>
        <li>subitem b</li>
    </ul></li>
  <li style="float:left;width:20%;color:white;background-color:#333;padding:4px 12px;">item 4</li>
</ul>
</div>

I find this is easier to read and maintain than a bunch of nested div tags, as well as being more semantically correct.

Upvotes: 1

ralph.m
ralph.m

Reputation: 14365

Set the outermost parent to position: relative, and then the inner divs of all levels to position: absolute;

You can position an absolute element in relation to an absolute parent, so no problem there.

Here's an example: http://codepen.io/pageaffairs/pen/dzkAF

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.one {position: relative; background: red; width: 200px; height: 200px;}

.two {position: absolute; background: blue; width: 80px; height: 80px; top: 20px; left: 30px;}

.three {position: absolute; background: green; width: 50px; height: 50px; top: 10px; left: 50px;}

</style>

</head>
<body>

<div class="one">
    <div class="two">
        <div class="three">
        </div>
    </div>
</div>

</body>
</html>

Here's an example with no heights set but with content added:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.one {position: relative; background: red; width: 200px;}

.two {position: absolute; background: blue; width: 300px; top: 20px; left: 30px;}

.three {position: absolute; background: green; width: 400px; top: 10px; left: 50px;}

</style>

</head>
<body>

<div class="one">
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
    <div class="two">
    Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
        <div class="three">
        Some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
        </div>
    </div>
</div>

</body>
</html>

Upvotes: 6

Related Questions