Layout using vertical borders and css in cs3 1

[Blueman2]

I'm trying to learn css and use cs3 for the first time, moving away from tables.

I want to have two vertical (& horizontal) borders (the borders are gifs) framing, my left vertical navigation div. I also want to have a content area (div) to the right of that and a header (div) above. The vertical graphic gif I am using for the border on each side of the navigation div is about 10 px W x 1200 px H. Also, I am planning on containing all of the above in a wrapper (container) Div.

I'm trying to use Floats (as I understand it's better than using AP DIVS), and have made some progress but I'm missing something, probably having to do with clearing floats. I've tried playing around with clearing floats various ways but still can't get the "Content" div to the right of the second vertical image. Basically I'm trying for a 3 column layout and bordering the divs with this gif image.

I'm guessing it might help to place these images within their own div, probably as the background but I don't know if that will fix the problem of the "Content Div" being forced downward.

Anyway, if someone could take a look at this and tell me what I'm missing in having this content area forced downward, I'd appreciate it

I know there are other issues but this is basically a test run to see what I could do.

http://saxstorage.com/test2.html

I would appreciate any help.

Thanks

 

[johnwm]

Just put float:left; on your gif and your content div

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Blueman2]

John,

Thanks for your help. I double checked to make sure I had all those elements floating left but I should have triple checked.

One last question: Is there some reason why I would be better off placing these gifs in their own Div or possibly creating a div that size and using the gif's I have as a background or am I fine doing it as I have it?


Thanks again

Mike

 

[johnwm]

If you use the image as a background to a div you can set the background-repeat value to repeat-x for the horizontal ones, or repeat-y for the vertical ones. That way you can reduce your image size to 10 x 1 px and give the possibility of fluid layout. See

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-repeaty

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints