CODEWITHSUNDEEP
htmlcss
fox
fox

Reputation: 387

Make div take all the remaining space

I have found several post with similar problems, but no good answers. I have two divs inside a div that has display: table-row propertie. My right div needs to have fixed with:200px and the left one must take the remaining space.

CSS: 

.dhPictureDiv{
float:left;
height:100%;
background-color:red;}

.dhInfoWrapper{
width:200px;
float:right;
background-color:yellow;
border: 0px solid red;}

.dhDivRow {
display: table-row;}

HTML:

<div class="dhDivRow><div class ="dhPictureDiv></div><div class ="dhInfoWrapper></div></div>

Upvotes: 2

Views: 1646

Answers (1)

Andy
Andy

Reputation: 14575

This has been covered to death, but here you go:

http://jsfiddle.net/wu7TR/

I would really recommend simplifying your class system

.dhPictureDiv{
    background-color:red;
    height: 100px;
    display: table-cell;
    width: 100%;
}

.dhInfoWrapper{
    background-color:yellow;
    height: 100px;
    display: table-cell;
    min-width: 200px;
}

.dhDivRow {
    display: table;
}​

Upvotes: 4

Related Questions