CODEWITHSUNDEEP
javascriptcss
brut65
brut65

Reputation: 418

child DIV fiting with height of main DIVs (side by side)

How can I make my .FormBox_Main and .ResultBox_Main dynamically track the uncertain height that .ResultBox_Child can be. By default I settle a height of 100% to .FormBox_Main and .ResultBox_Main, but if the height .ResultBox_Child exceeds that 100%, it comes out fit of the "main" DIVs.

What can be done in the CSS (avoiding JavaScript) for the height to follow any height that .ResultBox_Child may have?

CSS:

div.FormBox_Main{
    background-color: #F1F1F1;
    width: 20%;
    height: 100%;
    left: 0;
    position: absolute;
    border: 1px solid #0000FF;
}

div.FormBox_Child{
    background-color: transparent;
    width: 95%;
    margin-top: 10px;
    float: right;
    border: 0px solid #00FF00;
}

div.ResultBox_Main{
    background-color: #FFFFFF;
    width: 80%;
    height: 100%;
    left: 20%;
    position: absolute;
    border: 1px solid #FF0000;
}

div.ResultBox_Child{
    background-color: transparent;
    margin-top: 10px;
    width: 98%;
    float: right;
    border: 1px solid #00FF00;
}

HTML:

<div class="FormBox_Main">
    <div class="FormBox_Child">
        <label for="SomeText">Some Text</label>
        <input type="text" name="SomeText">
        <input type="submit" name="Submit" value="Submit">
    </div>
</div>


<div class="ResultBox_Main">
    <div class="ResultBox_Child">
        <ul>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <!-- ++ Multiple Lines -->
        </ul>
    </div>
</div>

Current Result:

enter image description here

Upvotes: 0

Views: 32

Answers (1)

Lee
Lee

Reputation: 31090

You could add a overflow:scroll to prevent this:

div.ResultBox_Main{
    background-color: #333;
    width: 80%;
    height: 100px;
    left: 20%;
    position: absolute;
    border: 1px solid #FF0000;
    overflow:scroll;
}

div.ResultBox_Child{
    background-color: red;
    margin-top: 10px;
    width: 98%;
    float: right;
    border: 1px solid #00FF00;
    
}
<div class="ResultBox_Main">
Result Main
    <div class="ResultBox_Child">
    Result Child
        <ul>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <li>Text</li>
            <!-- ++ Multiple Lines -->
        </ul>
    </div>
</div>

Upvotes: 1

Related Questions