CODEWITHSUNDEEP
htmlcss
Waqas
Waqas

Reputation: 335

Div height responsivness issue?

I have two divs .fac and .sub, I want .fac to be on the right side and stay responsive too at the same time but .fac height doesn't stay responsive. here is the CSS 

.sub{
width:50%;
padding:5%;
background:none repeat scroll 0 0 rgba(57, 90, 142, 0.50);
}

.fac{
width:30%;
float:right;
height:relative; // tried relative and if put any % or px number it doesnt work either
padding:3% 3% 3% 7.2%;  
background:none repeat scroll 0 0 rgba(72, 112, 166, 0.25);   
}

if .sub text increases the footer moves with and stay responsive but thats not the case with the .fac it crosses the footer and which looks bad. how this problem can be solved ?
Help !

Upvotes: 1

Views: 78

Answers (1)

newpatriks
newpatriks

Reputation: 581

Maybe you can use the display:table property. Here you have an example:

use another div, put both .sub and .fac in that 

.text_box {
            display: table-row;
            width: 100%;  
            height: 100%;
            position: relative;
           }
.sub{
     position: relative;
     width:50%;
     display:table-cell;
     float:left;
     height: 100%;
    }

.fac{
     position: relative;
 width:50%;
 float:right;
 background:none repeat scroll 0 0 rgba(72, 112, 166, 0.25);
     display:table-cell;
     height: 100%;
    }

I forked your fiddle example.

Upvotes: 1

Related Questions