I am fairly new to web design (first post!) and not a programmer, but like the elegance of CSS-based design despite its complexity. I am building a site that I hope to set up correctly from the start so that I can subsequently spend time on content rather than layout maintenance, namely never need at some future point to go through all my pages to make a layout change.
I am looking for the standard header, 3-column, and footer design with the following specs:
- Left justified, flush with top-left of screen.
- Header with minimum width (770px) and expandable to fill wider screens (this part I think I figured out already).
- Fixed left column ("Menu")
- Fixed centre column ("Content")
- Fluid right column ("Byline") that is always flush with the right border of Content and expands toward the right edge of the screen or even beyond it (trigerring horizontal scrollbar) if necessary.
The reason for the fluid right column is that I need to be able to place graphics of different sizes with unknown maximum width. Generally I would have the width at a set minimum so as to be 800x600 compatible except when wider graphics are used. So basically I need a fluid right column that has a fixed minimum width that I could set, but maximum width determined by the content I dump into there.
I would need fairly good browser back-compatibility as I will have some users from developing countries - I don't mind poor appearance in older browsers so long as the material is readable and ads don't obscure content (I'd rather have ads and graphics disappear than disturb text).
If possible the Content DIV should precede Menu and Byline in the HTML, or at least be before Byline.
Also, if there is a way to make Content expandable beyond its set minimum (through on-page editing) just in case of a wide graphic I need to place there that would be useful.
As a bonus (though I know this may be asking for much) I would like to be able to switch the Menu over to the opposite side, i.e. to the right of the fluid Byline and immediately following it (rather than flush with the right adge of the screen). I might be interested in doing this on some pages, in which case I would presumably be changing the order of DIVs in the HTML (but would be curious about the possibility of a CSS tweak I could add in the <style> section of that page); or I might decide to have the whole site thus altered in which case this would need to be doable via CSS alone.
I am bewildered by the array of possibilities, and the few allegedly robust designs I've come across don't match the above specs (even without the bonus requirements). I am wary of coming up with my own design as I can see how even professionals take months getting a design to work across the board. Any help is therefore much appreciated!