CODEWITHSUNDEEP
htmlcsscss-float
user2094315
user2094315

Reputation: 31

How to get floating div with 100% height to always stay 100%

I have a left float with 100% height and right float with 100%. Everything works fine till I fill one side up with text and the other side will just stop.

How can I fix this?

Upvotes: 3

Views: 1327

Answers (3)

Kvadiyatar
Kvadiyatar

Reputation: 964

try with below code.

in HTML

<div class="content">
<!-- Start UI Leftside -->
    <div class="ui-leftside">
        <div class="ui-cont">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
        </div>
    </div>
<!-- End UI Leftside -->
<!-- Start UI Rightside -->
    <div class="ui-rightside">
        <div class="ui-cont">
            <p>Add Text here how long you want</p>
        </div>
    </div>
    <div class="clear"></div>
<!-- End UI Rightside -->
</div>

In CSS,

.content {
    position: absolute;
}

.ui-leftside {
    background: none repeat scroll 0 0 #F7F7F7;
    float: left;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0;
    position: absolute;
    width: 25%;
}

.ui-cont {
    margin: 0;
    padding: 60px 0 10px;
}


p {
    margin: 0;
    padding: 0;
}


.ui-rightside {
    background: none repeat scroll 0 0 #999999;
    float: right;
    height: 100%;
    margin: 0;
    min-height: 100%;
    padding: 0;
    width: 75%;
}

Upvotes: 2

Antony
Antony

Reputation: 15106

Wrap the floating divs in an enclosing div with position: relative, then give the left float with position: absolute to make sure it goes to the bottom.

The left floating div needs a reference height to start with. The outer enclosing div allows a 100% height div to take the full height of the container.

I have changed the right float to float: right and given the header with a z-index: 2.

View on jsFiddle

Upvotes: 1

otinanai
otinanai

Reputation: 4025

You can use css tables after inserting a parent div for both columns. For example:

Your HTML:

<div id="parent">
    <div id="leftcolumn"></div>
    <div id="rightcolumn"></div>
</div>

Your CSS:

#parent{display:table-row}
#leftcolumn{display:table-cell}
#rightcolumn{display:table-cell}

Upvotes: 2

Related Questions