ansaurus

Question

css 2 column but have full height regardless of div height

Answer 1

A:

Does

<html>
<head>
</head>
<body style='background:#eeeeee'>
  <div id='col1' style='width:160px; background:#eeeeee; height:100%; 
       float:left;'>hi</div>
  <div id='col2' style='width:600px; background:#ffffff; height:100%; 
       float:left;'>hi</div>
</body>
</html>

work for you? It does leave a little gap at the top and bottom, though.

Sam Dufel 2010-10-17 22:21:18

Please put the CSS rules inside the `<STYLE>` element

Šime Vidas 2010-10-17 22:23:10

Hello, these all work but perhaps I didn't make it quite clear enough (I stated it at the bottom), the background colour while grey needs a background image, e.g. background: rgb(220,220,220) url('../images/bg.png') repeat-x;But this doesn't work. This image is 400px high and makes it look like the top of the left/right columns are fading from white.

neil 2010-10-17 22:42:29

also, only works with quirks mode

neil 2010-10-17 23:25:09

Answer 2

A:

I used a 600x1 image: http://vidasp.net/tinydemos/background.html

Šime Vidas 2010-10-17 22:21:58

see comment above for Sam Dufel below

neil 2010-10-17 22:45:28

Answer 3

A:

I think Sam is on the right track... Can expand on his solution slightly:

body { width:100%; height:100%; margin:0; padding:0; background:#555; } .column-one { width:160px; height:100%; margin:0; padding:0; background:#555; float:left; } .column-two { width:600px; height:100%; margin:0; padding:0; background:#FFF; float:left; }

Column one here Column two here

timothyclifford 2010-10-17 22:29:04

Please put all CSS rules inside the `<STYLE>` element

Šime Vidas 2010-10-17 22:33:22

see comment for Sam Dufel below

neil 2010-10-17 22:44:52

Answer 4

A:

Hello, These only work in quirks mode. When I specify xhtml1.0, html 4 transitional, etc it fails. Specifically I'm also using an image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<style type="text/css">
body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:rgb(220,220,220) url('images/bg.png') repeat-x;
}
</style>
</head>
<body>
  <div style="width:160px;;height:100%;float:left;margin:0;padding:0;">

  </div>
  <div style="width:600px;background:#ffffff;height:100%;float:left;margin:0;padding:0;">Column Two</div>
</body>
</html>

neil 2010-10-17 22:57:46

Answer 5

A:

Typically, something like this would be done with a couple of images. The body background image would be a 1-pixel-high image with a 660-pixel-wide white area on a grey (#dcdcdc) background. To prevent multiple vertical white stripes, the image would be very wide (3000 pixels with an optimized pallete saves as a 157-byte PNG). Your current fade background would be applied to a full-width header div. That leaves an ugly spot at the top of the main content area, which you would overpaint by using a negative margin-top (and whatever padding-top you need to compensate) on the outermost div that lives in the main content area.

Stan Rogers 2010-10-18 00:49:53

Answer 6

A:

Here's a simple method. Using an AP box and a wrapper, we can create what you're looking for.

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
</div>

CSS:

#wrapper {
    position: relative;
}

#left {
    width: 100px;
}

#center {
    position: absolute;
    left: 100px;
    top: 0;
    width: 200px;
    background-color: white;
    height: 100%;
}

See: http://www.jsfiddle.net/yijiang/pasUC/

Yi Jiang 2010-10-18 01:23:15

ansaurus

tags:

views:

answers:

css 2 column but have full height regardless of div height

related questions