CODEWITHSUNDEEP
htmlcss
stylesuxx
stylesuxx

Reputation: 845

How to position a div on bottom of box flex container

I am trying to position a div on bottom of each child that are next to each other in one row and expanded to the parents height.

My HTML looks like this:

<div class="parent">
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
  <div class="child">
    <div class="bottom">Footer</div>
  </div>
</div>

This is what I have come up with: http://jsfiddle.net/xtvDQ/

But I can not position the div.bottom on the bottom of div.child.

Is there any way to accomplish this? If I remove all the box related css it works as expected, but I lose the height expansion to the parent container.

So it does not get to easy: Javascript is not an Option here.

Upvotes: 3

Views: 1685

Answers (2)

Andrew Johnson
Andrew Johnson

Reputation: 446

Change your css to the following

.parent {
    position:relative;
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width:100%;
    min-height:200px;
}
.parent .child {
    background:red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    border:2px solid green;
}
.parent div + div {
    margin-left:10px;
}
.parent .child .bottom {
    position:absolute;
    bottom: 0;
    border:2px solid blue;
}

http://jsfiddle.net/isherwood/xtvDQ/11/

Upvotes: 2

xuscrus
xuscrus

Reputation: 117

http://jsfiddle.net/xuscrus/AeRVs/

display:-webkit-box;
display:box;

May be causes problems. I hope my solution will useful to you

Upvotes: 0

Related Questions