0

I am looking to do this but do it vertically instead of horizontally. I have already tried the solution here but I want the child divs to equally space over the entire height of the container div - that solution only centers the divs without expanding the space in between them to use the entire height of the container. I am willing to use Javascript, but would prefer an HTML/CSS only solution. I've looked briefly into the flexbox, but I was scared off by backwards compatibility issues.

Some basic code:

<div id="parent">
    <div id="1" class="child"></div>
    <div id="2" class="child"></div>
    <div id="3" class="child"></div>
</div>

Should render with div1 at the extreme top of the parent, div 2 at the extreme bottom of the parent, and div3 centered in the middle, and ideally I could add a variable number of additional child divs and the spacing would automatically adjust.

Any suggestions? Should I just use the flexbox and not worry about supporting older browsers?

Community
  • 1
  • 1
Michael.Lumley
  • 2,345
  • 2
  • 31
  • 53
  • I think you can currently only do this with flexbox. Otherwise the closest you'll get is with css tables http://jsfiddle.net/brxpv/1/ - but that's not really the effect you want – Danield Apr 22 '14 at 11:32

2 Answers2

0

I have worked with javascript. my javascript code is

function cssFunction(){
            var elem = document.getElementsByClassName("child")
            var len = elem.length;
            for(var i=0;i<len;i++){
                elem[i].style.height =200/len;
            }
        }

and the css is 

div#parent{
  max-height: 200px;
  width : 500px;
  padding : 0px;
  margin : 0px;
 }

.child{
    border:2px solid #a1a1a1;
    width : 93%;
    margin : 5% 0%;
    height : 100%;
 }

and Html is

<body onload="cssFunction()">
    <div id="parent">
        <div id="d1" class="child">Vertical alignment</div>
        <div id="d2" class="child">Vertical alignment</div>
        <div id="d3" class="child">Vertical alignment</div>
        <div id="d4" class="child">Vertical alignment</div>
        <div id="d5" class="child">Vertical alignment</div>
        <div id="d6" class="child">Vertical alignment</div>
        <div id="d7" class="child">Vertical alignment</div>
        <div id="d8" class="child">Vertical alignment</div>
</div>
chandu
  • 2,276
  • 3
  • 20
  • 35
-1

I think you could probably do something like this:

HTML

<div id='parent'>
    <div id='1' class='child'></div>
    <div id='2' class='child'></div>
    <div id='3' class='child'></div>
</div>

CSS

.child {
    height: 30%;
    margin: 0;
}

#parent {
    height: 90%;
}

Using percentages is an easy way to fill things, such as your div #parent, though you could also use whatever units you like.

Hope this helped.

gilbert-v
  • 1,263
  • 1
  • 11
  • 23
  • No. If you read the question, you will see that the solution needs to respond to a variable number of child divs, which this approach does not do. – Michael.Lumley Apr 06 '14 at 21:16
  • Well then, sorry I couldn't help, there's probably a way to do do it... maybe if you just specify the width? That would just set the width, the height would just automatically adjust. – gilbert-v Apr 07 '14 at 09:46