Question

I have 2 fieldsets wrapped in a <div>, let’s call them blah1 and blah2.

blah2 can grow as the max of its <div> parent, but I need blah1 to have the same % height of his sibling blah2

This is my demo

Answer 1

The answer was kinda weird, but I make it work, looks like the margin was making a mess here, if I set it to margin: 0 5px; then I can make both fieldsets to have the same height as their parent

Part of the css markup:

fieldset
{
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    border-radius: 8px;
    margin: 0 5px;
    height: 100%;
}

legend
{
    font-size: 1.2em;
    font-weight: bold;
}
.blahContainer{
    width: 100%;
    height: 100%;
}

.blahColumna1{
    width: 70%;
    height: 100%;
}

If you wanna see the final demo, click here.

Hope it can help somebody else…