HTML layout issue using display:table

I am trying to use display:table, table-row to get a final output as below. The blue box should be resizable and the red box should have fixed height.

To start a jsbin is here.

I am looking for a css solution. Thanks.

Answers


It's work with display:table . Write like this:

#wrapper {height:250px; width:200px; border:3px solid gray; display:table;}
  #one {height:100px; background-color:red;display: table-row;}
  #two {background-color:blue;display: table-row;}

Check this http://jsfiddle.net/jYvK2/


Need Your Help

When should I Init my tiles in my Android view?

java android

The dimnensions of my tiles depend of the width annd height of the screen.

Insert web frame with WebRTC support in own application

c++ qt webkit qtwebkit webrtc

We are about to extend an existing application based on Qt 5 to support video/audio-chat using WebRTC.