0

See http://jsfiddle.net/RZzwP/

In a div I have two variable height divs of width 50%, one floated left and one floated right.

I want the heights of all three divs to be equal to the height of whichever of the two child divs is greatest.

A minor complication is that I want some text in the very middle (crossing the 50% division), making tables tricky(/impossible?).

<div class="or cf">
    <div class="a"><h1>A!</h1></div>
    <span>OR</span>
    <div class="b or cf">
        <div class="a"><h1>B</h1></div>
        <span>OR</span>
        <div class="b"><h1>C</h1></div>
    </div>
</div>

And the css is: (class cf is this clearfix)

.or {
    width: 100%;
    position: relative;
}
.or > .a {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: left;
}
.or > .b {
    width: 50%;
    height: 100%;
    z-index: 0;
    float: right;
}
.or > .or > .a {
    width: 100%;
    height: 50%;
}
.or > .or > .b {
    width: 100%;
    height: 50%;
}
.or span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.5em;
    margin-left: -20px;
    width: 40px;
    z-index: 1;
}

As you can see from my jsFiddle, the divs with A! and C! in them aren't stretching to the bottom of their parent.

How can I make it so?

Max
  • 2,760
  • 1
  • 28
  • 47
  • You can refer my answer here http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it – Mr. Alien Oct 12 '13 at 06:36
  • @Mr.Alien I already use a clearfix, as stated in the question. – Max Oct 12 '13 at 06:46
  • Would it be ok for you to add a height in `px` to `.or` like [this](http://jsfiddle.net/RZzwP/1/)? – Harry Oct 12 '13 at 06:57
  • @Harry Unfortunately not, no. – Max Oct 12 '13 at 06:59
  • Oh, ok. Reason is because I think if there is no set height on the parent, then 100% on child would mean just the height needed for that child and not 100% of parent (Apologies, if you couldn't understand it. I am searching for better words/sentence). – Harry Oct 12 '13 at 07:04

0 Answers0