CSS layout problem

[BKistler]

I've only been using CSS for a short time. I fully grasp the concept and have used it alot recently. There is one problem that I've been having that I'm not sure how to solve, though.

I'm donating a website to my local skydiving center. I've made the design, and I'm trying to use a fully w3c compliant CSS-based layout, and not use a single table for layout. I'm trying to make the main content box of the page stretch with the content, while keeping the frame around it. You can see a .jpg example of the general layout here.

I know how to make the content window stretch with the content, but I don't know how to make the bottom and side divs move and stretch to follow it. I'd also like (if possible) to make the document scale horizontally to the browser window. I've only tried it using absolute positioning, because that's the only way that I can figure out to get ImageReady 6.0 to export the CSS.

Any thoughts or solutions on this would be greatly appreciated!

-Brett

[speed]

If you use percentage widths then the elements will adjust based on the size of the browser window, basically the design could be based on a standard 2 column fluid.

http://glish.com/css/9.asp is one example of a 2 column fluid, though you will need to fix the width of the menu column in pixels so that the background images stay aligned, but apart from that a fluid design will follow the browser width.

To do fluid layouts you need to avoid absolute positioning which means you're going to have to roll up your sleeves and dive into hand coding your CSS rather than using ImageReady.

With the background image you'll need to attach a background image to a wrapper <div> which encompasses the dark blue area with the rounded corners, then you need to attach the lightened and cropped version to the content area's <div>.

The rounded corners will need to be independent floated <div>s so that as the page changes width/height they are free to move, see http://www.neuroticweb.com/recursos/css-rounded-box/

[BKistler]

I'll have to try that and see if I can get it working. I've already said goodbye to trying to get any useful code out of imageready. All it's made so far is a nightmare.

Thanks for the suggestions!

[speed]

I, and others I know, don't use any WYSIWYG or code generation tools to build sites. Some use little more then Notepad and Photoshop, I tend to use the source code view of GoLive or Dreamweaver.

[brian.mark]

Wow... if only I could use notepad...

Nah... I'll stick with vi through a ssh session.

Probably my biggest complaint with your layout is that the site name is tough to read. The text over the jumpers (text--- text--- text---) is a little tough to read as well.

If I wanted to jump out of an airplane, this layout certainly says that's what the page is about.

Brian.