CSS positioning

[john323]

Please forgive me if this is a simple question, but I am new to CSS.

I am testing out a template page that is linked below.

http://www.rosemagazine.com/newsite/

The navigation left bar fills green color background only to the bottom of the navigation text.

Since a database will be dynamically bring text into the center column of the pages, I will want the green to fill in the full length of the page as the page grows longer or shorter.

My style sheet code for the green navebar is

#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #00FFCC;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

Any advice is appreciated.

thanks.

 

[Vragabond]

Take a look at faux columns.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[john323]

Thanks Vragabond.

I've almost got this ironed out. But one more problem with the nav bars extending below the horizontal bottom red line.

http://www.rosemagazine.com/newsite/

I can't seem to find the fix for this.

Thanks.

 

[Vragabond]

Did you fix it? Is the problem related to just one browser? I cannot see the issue on my computer.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[john323]

I did a print screen of what my browser shows.

http://www.rosemagazine.com/newsite/newpage.htm

There must be some bottom padding that is pushing the body below the red bottom horizontal line.

A quick fix for now is to remove the horizontal line if you can't help me.

Thanks Vragabond.

 

[Vragabond]

Are you really using a 1px red graphic do draw that line? I would suggest you put your entire website in another container and give that container a red border. If you want, you can just put it on the sides you want the border on.

And the problem with your method does not happen on Firefox. It is probably there due to whitespace, so you could make that image a block level element, which might also work.

But I would really suggest either first option, or simply centring the page and removing the red border altogether (At first I thought it was just a helping line).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]