Liquid CSS 3 column Header Layout - fixed, liquid, fixed
I'm new to this forum and eager to learn. I've written several websites over the years and none that were anything close to web standard compliant. They were designed using MS FrontPage utilizing many tables, nested tables, and then more tables. It's a HTML mess. While the content is solid, the site needs a serious overhaul and re-write. I've taken several online classes through Ed2go through my local community college that cover the basics of Dreamweaver CS5 and then intermediate HTML and CSS. I plan to continue with the intermediate HTML & CSS class after an upcoming total knee replacement surgery. At least after I no longer need the pains meds and can concentrate better.
In the meantime, my pressing issue is creating my templates needed to get this re-write done. Where I am at this point is stuck. The header I envision would use three images I created in Photoshop. The first is the left column (fixed width of 330px) with my observatory name and coordinates, the right column is an image of fixed width of 300px. The center column would be liquid, if possible, allowing the left and right pictures to remain in their positions and the center image, title of the website with shadow and bevel affects, to remain center of the two columns regardless of monitor resolution. I would set the minimum width to 1024 and maximum to 100%. Height would be fixed at 200px. Actual dimensions of the images used are: left - 330x200px right - 300x200px center - 450x120px. I could remake that center image giving it a 200px height placing the text where I want it aligned if that makes it any easier. Is this possible or even practical? I should mention that I can easily do this using tables but I am trying to 1) learn the proper technique 2) be standards compliant.
Thanks for reading.
Example of Layout using Tables
I've uploaded a screenshot of what I'm trying to do but not the html as this is only an example of the layout I'm trying to get using CSS <div> tags. Or maybe there's a better tag to use? The header is the issue with it's three columns and making it a fluid design. What I didn't do in the example is give any padding or margins so it does butt right up against the monitor edge. This is not a finished layout so there are tweaks to be done yet but only as a quick example.
Thanks for any thoughts.