CSS Background fill

dlg0351 · 05-05-2006, 12:16 AM

I am trying to make the conversion from tables where things were so much easier, to using only divs and css.

I am having trouble getting the left div (navigation) to expand vertically as the right div (content) expands. Basically I want the yellow background to be the same height as the blue background, But I don't know the length of the content background because that is going to change on every page.

Using tables the cell expanded automatically as the content grew.

Can anyone help me with this? It seems like an easy and common thing to do, but I am at a loss.

Any help is greatly appreciated!

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>



<style>

<!--

body {

    margin: 5px;

    padding: 0px;

    font-family: arial, sans serif;

    font-size: 12px;

}



#page-wrapper {

    width: 100%;

    height: auto;

    border: 0px solid black;

}



#nav {

    margin: 0px 0px 0px 0px;

    padding: 5px;

    float: left;

    width: 150px;

    background: yellow;

}



#content {

    margin: 0px 0px 0px 5px;

    padding: 5px;

    float: left;

    width: 240px;

    background: blue;

}

-->

</style>

</head>



<body>



<div id="page-wrapper">

    <div id="nav">NAVIGATION</div>

    

    <div id="content">

    CONTENT<br />

    CONTENT<br />

    CONTENT<br />

    CONTENT<br />

      CONTENT</div>

</div>



</div>



</body>

</html>

_Aerospace_Eng_ · 05-05-2006, 12:18 AM

Its common but takes more work. Read this article http://www.alistapart.com/articles/fauxcolumns
CSS lacks the ease of making equal columns but faking it works wonders. You could always use JS but kind of defeats the purpose.

dlg0351 · 05-05-2006, 12:37 AM

You're kidding? This is the only way to do this? Using a background image to give the appearance of 2 columns the same height?

Is this really the only way?

Arbitrator · 05-05-2006, 01:21 AM

You can do it the way shown below. However, you must use an image to get the desired effect, and the content (i.e., navigation, sidebar) must be of a defined width. It's one of the current problems with page divisions for layout; you can't achieve the dynamically expanding columns paradigm without "cheating", so to speak. Table layouts, background-image illusions, and JavaScript are the easiest ways to do this.

<div id="backgroundLeft" style="background: #000 top left repeat-y;">
<div id="backgroundRight" style="background: #000 top right repeat-y;">
<div id="container"></div></div></div>

There's also JavaScript to dynamically make the columns of equal height, however those without Java enabled will not see the effect.

drhowarddrfine · 05-05-2006, 04:01 AM

If your wrapper is only to contain the two floated divs, you can just make the wrapper div overflow:auto; and give it the same background color as the nav div. This will look the same as what you want without the faux columns.