CSS - three column layout?

windows

Guest
I'm just learning CSS. I normally design my sites in tables. Top bar (header/logo), left navigation bar (with a background color) and center contents.

I'm trying switch to CSS. I can sort of get the layout BUT the left navigation bar background color won't extend down the length of the page (to match however long the content area may be).

Is there a way to do this??? Is there a height tag I should use?

The nav bar is set for a certain background color which does show up but it won't extend down the page to match the content area and it's driving me crazy (short drive)!

Would someone mind helping? By the way... I use Dreamweaver MX2004 if that should make a difference.

Here's a link to what I have (the text has not been formatted yet)

<!-- m --><a class="postlink" href="http://www.homeguardians4u.com/css_sample_layout.htm">http://www.homeguardians4u.com/css_sample_layout.htm</a><!-- m -->


Thanks!Here's the trick. Wrap your sidebar and content in a div, e.g. page, and set that color to match your sidebar background.

#page { width:760px; background:#081849; }Thanks for your help!!! That worked for the navigation bar, but now it put a blue row between the header and content

<!-- m --><a class="postlink" href="http://www.homeguardians4u.com/css_sample_layout2.htm">http://www.homeguardians4u.com/css_sample_layout2.htm</a><!-- m -->

Maybe I put the div tag in the incorrect place?

Sorry, but I'm VERY new at this!! Years of using tables is making this difficult to understand. : -)

ArleneTry setting vertical margins of the adjuscent blocks to 0Sorry, I don't undertand what you are saying. I don't see any vertical settings (remember - I'm VERY new at this!).

It appears the blue bar going across the top of the content sections is part of the nav bar tag. ????

Thanks!Maybe I put the div tag in the incorrect place?
Right. The top bar should not be inside the page div.Thanks but no matter where I put that tag it either keeps the blue line going across. I even tried a closing div tag after the #page but as soon as I did that, the navigation bar background didn't extend again.

?????? Any suggestions on where I need to put the page div to make it work?The #2 page seems to have problems with the height of the top bar. If I drop it to 130px it looks like I expect you want. Using a single image for that and putting it in the background of the top div will give you more control.Thanks,

The image height is 154px - if I change the top bar to 130 height, won't that mess it up?

I'll try it and let you know if it worked.DING!!! DING!!! DING!!! We have found the winner layout using css! This is another thing I have been so looking for since I have been to this forum. :D hahaha... <wonders>..Is it ok to use them layout codes....but of course change it to my liking..? :p I just wasted too much time on mine as of now it isn't funny..and now since being here...omg....I gotta change the site codes again... :rolleyes: Just curious...thanks in advanced..

TwistedUPDATE: The DING!! DING!! DING!! Went to hell with the rest of the crap...mmm...was a toilet flushing LOL!!...Yup!..Sorry..That layout failed the twisted site testing grounds... :D No offense though topic starter.. Welp!....I guess I'll just keep my site the way it is now...if ya don't like it..well..you know..<flush> I'll just get rid of the crappy drop down menus..don't need that anyways..hehe..

Twisted-Well....I have given it some thought again...I might try this after all eventually....I'm just so tired of recoding this and that... it's not funny.. lol.. I'm just going to take this slow and easy next time (just like making love)...first that has to go then is the dang drop down menus..after I get home from hell...I mean work then..I'll work at it some more hehe.

Twisted-
 
Back
Top