2

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>
fox
  • 287
  • 5
  • 16

1 Answers1

4

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;
}​
Andy
  • 14,427
  • 3
  • 52
  • 76
  • I need to have the display:table-row propertie! – fox Dec 06 '12 at 13:34
  • 1
    so change `display: table;` to `display:table-row`, it will still work – Andy Dec 06 '12 at 13:35
  • If it's been covered to death, perhaps you can solve the "How to make div take all the remaining *vertical* space" problem. Here's [a jsfiddle to get you started](http://jsfiddle.net/PF4uS/). [This guy says it's not possible without javascript](http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space). – Ian Boyd Jun 07 '13 at 19:19
  • @IanBoyd It isn't, the only way that would be possible is with a table, like my answer here and the current solution the OP is using on that question. You can't do it without knowing the headers height (then it becomes trivial, using absolute positioning and `bottom: 0;`) – Andy Jun 10 '13 at 08:18