ansaurus

Question

How can I convert this table based layout to CSS?

Answer 1

+1 A:

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:

HTML:

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

CSS:

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

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

Dominic Rodger 2009-07-31 08:47:00

This looks like it answers the question I asked but I'm not sure it will exactly fit my needs. I'll test it and either accept this as the answer or refine the question. Thanks.

Andrew 2009-07-31 08:57:39

Answer 2

A:

<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>

usoban 2009-07-31 08:48:16

I tried this solution in IE8 and Chrome2. Both browsers yield a scrollbar on the right. There should be no scrollbar on the right or at the bottom.

Andrew 2009-07-31 08:52:32

I'm pretty sure that's going to cause problems if the content ever exceeds the browser's viewable region, where the colour will not continue all the way to the end of the content.

Dominic Rodger 2009-07-31 08:53:48

I've added some content that is too big in the sample to show how I would like it to work where there is a content overflow problem.

Andrew 2009-07-31 09:31:03

ansaurus

tags:

views:

answers:

How can I convert this table based layout to CSS?

related questions