How can I convert this table based layout to CSS?

I have a table based layout which is 100% height/width with no scrollbars. The header (red) automatically expands to fit the content and I don't know how many pixels it will be. The fluid table below gives exactly what I what.

<html> <body height=100%> <table height=100% width=100% padding=0> <tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr> <tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top> <div style="height:100%; width:100%; overflow:auto;"> This area can have content that overflows - needs an independent scrollbar.<br/> 0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> </div> </td></tr> </table> </body> </html>

How can I do the same layout in CSS and have it work on commonly used browsers?


The header shouldn't be too difficult, for the two columns, I think you'll need to use faux columns to make the colours stretch all the way to the bottom.

For the header I think you'll just want:


<div id="header">Fit<br/>to<br/>content<br/>height</div>


#header { background-color: red; width: 100%; }

p.s. You just made my eyes bleed ;)


<html> <head> <style type="text/css"> #wrapper { height: 100%; width: 100%; padding: 0; } #header { float: left; width: 100%; background-color: red; } #main { height: 100%; width: 100%; float: left; } #main-left { height: 100%; float: left; width: 66%; background-color: blue; } #main-right { height: 100%; float: left; width: 34%; background-color: green; } </style> </head> <body> <div id="wrapper"> <div id="header"> Fit<br />to<br />content<br />height </div> <div id="main"> <div id="main-left"> How can I do this with CSS? </div> <div id="main-right"> Tested in Chrome 2 and IE8 </div> </div> </div> </body> </html>


  • The script does not work in IE. How can I fix it?
  • Change the background color of a div after some interval
  • jQuery: remove the closest with a dynamically added button
  • Bootstrap-datetimepicker - dynamically add shows up in wrong area
  • ContextCompat.getcolor() going to null object reference
  • Submitting two different forms with an external Submit button not working properly
  • How to read the param value from the object tag using javascript
  • Get attributes of existing SVG elements and bind as data with d3.js
  • Setting color in a row of a Jtable
  • How to resize image if the image is bigger than Textbox.But it not increase scale if smaller
  • UIButton Borders Function Only Gives Back White Borders
  • Formatting a text in a table cell with PHPWord e.g. bold, font, size e.t.c
  • is it possible to insert a line break in this tooltip?
  • Why does the font in these TD elements render at different sizes?
  • garbled css name when styling within UiBinder
  • How to merge keras sequential models with same input?
  • Prevent page break in text block with iText, XMLWorker
  • How to open html table in xls on click of a button
  • how to get username into sql trigger when multiple users signed on from asp membership
  • Can I read an iPhone beacon with Windows.Devices.Bluetooth.Advertisement.BluetoothLEManufacturerData
  • Adjust width of select element according to selected option's width
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How to modify the colors in the legend of a plot using a fill gradient?
  • Custom validator control occupying space even though display set to dynamic
  • Play WS (2.2.1): post/put large request
  • Read a local file using javascript
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Modifying destination and filename of gulp-svg-sprite
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • How to delete a row from a dynamic generate table using jquery?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?