Height Problems with CSS Child element - html

Question

I got a problem with giving back the child height to its parent.
The code comes from the Magento OnePageCheckOut site and I guess it is an css issue.
Normally the checkout goes from up to down. With using of a modified css code, the progressbar is seperated on top of the page and the content for the current step is shown below. Sadly, the child-element, where the content is shown, is handled as an overflow element. This makes it necessary to set a defined height for its parent element, which means, all steps have the same height and it looks so bad.
Maybe you guys have an idea what I could change in the css files to give the needed height back to the parent-element. I tried to change the display values or played with position, but to be honest, I m not that deep in css to know exactly what am I doing. It was more trail and error.
An image of that problem below:
The code is:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section allow active">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item"></div>
</li>
<li id="opc-shipping" class="section">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item" style="display:none;"></div>
</li>
</ol>
.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0;}
.opc li.section { display: inline; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { position:relative; text-align:center; border:none; background:none; padding:0; overflow:hidden!important; height:80px; display:inline-block; vertical-align:top; }
.opc .step { padding:30px 20px; position:absolute; border:0; top:100px; left:0; z-index:1; background:#fff; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; width:643px; text-align:left;}
.opc:first-of-type .active .step{left:0; width: 100%;}

Answer 1

For starters, this is not going to be pretty (It's because of things like this that make me less and less of a fan of Magento). Basically what the current CSS is doing is positioning .step-title relatively and .step absolutely. Absolute positioned elements are out of flow for the document, so what ends up happening is the document renders the .step-title elements as if they were right next to each other, but the .step is out of flow, so it's just kind of hanging out 100px from the top of .opc. In order for the .steps to have their normal dimension, we need to figure out how to get them to not be position: absolute. I took the CSS and made this fiddle:
http://jsfiddle.net/31db2uma/
The first step is to remove the position:absolute and related rules and the height attributes:
http://jsfiddle.net/31db2uma/1/
.opc {
position:relative;
overflow:hidden;
padding-top:20px;
text-align:center;
border:1px solid #BBAFA0;
}
.opc li.section {
display: inline;
}
.opc .step-title,
.opc .allow .step-title,
.opc .active .step-title {
position:relative;
text-align:center;
border:none;
background:none;
padding:0;
overflow:hidden!important;
height:80px;
display:inline-block;
vertical-align:top;
}
.opc .step {
padding:30px 20px;
border:0;
background:#fff;
width:605px;
border-bottom:1px dotted #ccc;
border:none;
width:643px;
text-align:left;
}
.opc:first-of-type .active .step{
left:0;
width: 100%;
margin-top: 80px; /* same as old title height. This is for later when we make the steps `position:absolute` */
}
The trick is then to make sure all the steps stay at the top of the .opc container. For that, we need to take it out of flow and for that we use position:absolute (same bad code, different application). This will cause another major issue to arise. We have no idea where to put the elements. Our best bet would be to give them each 20% width assuming there will always be no more and no less then five steps.
http://jsfiddle.net/31db2uma/2/
#checkoutSteps li .step-title {
width: 20%;
position: absolute;
top: 20px; /* same as padding */
}
#checkoutSteps li:first-child .step-title {
left: 0;
}
#checkoutSteps li:first-child + li .step-title {
left: 20%;
}
#checkoutSteps li:first-child + li + li .step-title {
left: 40%;
}
#checkoutSteps li:first-child + li + li + li .step-title {
left: 60%;
}
#checkoutSteps li:first-child + li + li + li + li .step-title {
left: 80%;
}
This is a pretty thoroughly hacked solution, but I know from experience that Magento sometimes doesn't really give you many options.

Answer 2

What you can do is when user clicks next button, get the height of the next new child container to be shown in jquery and set that height to the parent container. You can use CSS but giving static height can be problematic if content goes down in different screen resolutions. Jquery will help in this