css layout

[john noble]

Using the following css


div#wrapper {width: 70%; margin:0 auto;}
div#header {width: 100%; height: 140px; background: yellow; padding: 0px, 0px, 0px, 0px; float:center;}
div#navigation {width: 20%; background: gray; padding: 0px, 0px, 0px, 0px; float:left;}
div#mainContent {width: 80%; height:auto; background: red; padding: 0px, 0px, 0px, 0px; float:left;}
div#footer {width: 100%; height: 140px; background: black; padding: 0px, 0px, 0px, 0px; float:center;}



My problem is this:

The navigation section is directly to the left of the main content section.
How can I ensure that the height of the navigation section will ALWAYS match that of the main content section which will be dynamic based on the amount of text in it?

I understand that using auto will stretch the main content section as text is added inside it. However the navigation section will be mainly static thus creating a gap starting underneath the nav section to the end of the main content section.

Can I make sure the naigation section will grow as and when the maincontent section grows?

Hope this makes sense!

John

[Centauri]

You don't - in the context of content, forcing the container to be larger than it needs to does not make sense. For visuals, faux columns (http://alistapart.com/articles/fauxcolumns) can make it look like the columns are equal.

[dtm32236]

padding: 0px, 0px, 0px, 0px; is wrong syntax...

it should be:
padding: 0px 0px 0px 0px;
but this is the same as:
padding: 0;

and there's no such thing as float:center;
it's either float:left; float:right; or float:none;

i don't know what you're trying to do with float:center; but maybe you want text-align:center;

[WebJoel]

Also incorrect syntax is this:
background: red; That is "background-color:red;", unless you combine two or more background attributes into one 'shorthand' declaration, like this:background-image: url(image.jpg);
background-position: left 50%;
background-color:red; becomes in 'shorthand':
background:red url(image.jpg) left 50%; Note no commas or semi-colons between the values.

Firefox at least, will not recognize "background:red;"

[Kravvitz]

Alternatively, you could use a technique like this one (http://www.pmob.co.uk/temp/2column_simple_1.htm).

Firefox at least, will not recognize "background:red;"
Huh? It works for me.

Perhaps a bug in Firebug confused you?

[ray326]

I'm sure the simple "background: red;" is ok although I wonder but am too lazy to experiment to see what happens to the other potential attributes would be in for repeated use like.

background: url(myback.gif) norepeat;
background: red;

Oh fooey I'll try it. ---- It totally overrides the preceding background and defaults the rest of the styles.

[WebJoel]

I'm sure the simple "background: red;" is ok ... It doesn't seem to work on my HTML-editor which uses the IE6 rendering. -I have seen my HTML-editor behave differently than IE6-proper, however.
This issue has caused me problems in the past so I just automatically now never write it that way. :o
I would like to hear if others either see or do not see the same thing.. ;)

It is like:

div#wrapper {width: 70%; margin:0 auto;}

perfectly legal to write it that way, but my preferance is to omit the "div" and let the id speak for itself.

-All a matter of preferance really..