CODEWITHSUNDEEP
htmlcss
mupersan82
mupersan82

Reputation: 567

Vertically stretching a DIV

I've created a fiddle here: http://jsfiddle.net/mupersan82/xAgHg/2/

HTML:

                <div class="incidentRow">
                <div class="incidentCellLeft">
                    <span class="incidentCellTopLeft incidentId">206 805</span>
                    <span class="incidentCellBottomLeft incidentReferences">15</span>
                </div>
                <div class="incidentCellTopRight incidentSubject">Anders Buch Lassen</div>
                <div class="incidentCellBottomRight incidentDescription ">
                    <span class="multilineEllipseText">Knokler, knokler, knokler! 
                        Burde gå i seng. Burde gå i seng. Burde gå i seng.
                    Burde gå i seng.Burde gå i seng.Burde gå i seng.
                    Burde gå i seng.Burde gå i seng.Burde gå i seng.</span></div>
            </div>

I want the grey box on the left to stretch down to the blue border at the bottom of the wrapper div. It should continue to stretch as more content is added in the box on the bottom right. How can this be achieved?

Upvotes: 0

Views: 88

Answers (2)

hughes
hughes

Reputation: 5713

You don't need to change the height of anything. Just set the background-color of the container to grey, and the background color of the right cells to white:

demo

Upvotes: 0

Viktor S.
Viktor S.

Reputation: 12815

.incidentCellLeft
{
    max-height:200px;
    width: 50px;
    display: block;
    float:left;
    text-align: center;
    background-color: #E6E6E6;
    vertical-align: bottom;
    height:100%;
    position: absolute;
}

height:100%; and position: absolute; added. Demo here: http://jsfiddle.net/xAgHg/5/

Besides, you shoudl remove max-height:200px; if you want it to be stretched to more than 200px height.

Upvotes: 2

Related Questions