0

I have the following divs:

<div id="outer"> 
<div id="inner" >Inner1
    <div id="ininner1" >Ininner1</div>
    <div id="ininner2">Ininner2</div>
</div>
<div id="inner2">Inner2</div>
</div>

How can I increment their heights so that they are in a single column? I was thinking maybe a for loop, but I'm not quite sure how that would work with divs

#inner{
background-color:#B0C2F7;
top: 80px;
left: 125px;
}

#inner2{
background-color:#FF0000;
top: 180px;
left: 25px;
}

The Ininner divs are the same way with different numbers for 'top'. I just a way to do with a loop if possible.

6
  • 2
    @downvoter, please provide a comment at least.
    – Dalorzo
    Commented Jul 25, 2014 at 18:53
  • a single column? Do you mean you need one div next to the other instead of below?
    – Dalorzo
    Commented Jul 25, 2014 at 18:54
  • in css : div {width:100%; float:left;} Commented Jul 25, 2014 at 18:55
  • 1
    Why do you need to increment heights to get them in a single column? They do that by default: jsfiddle.net/297my/5 Commented Jul 25, 2014 at 18:55
  • what that should look? have you any css for that? have you an image of what are you currently viewing?
    – lante
    Commented Jul 25, 2014 at 18:55

1 Answer 1

2

Try this:

var containerDiv = document.getElementById("circle");
var innerDivs = containerDiv.getElementsByTagName("DIV");
for(var i=0; i<innerDiv.length;i++){
    //height increment here
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.