homepage Welcome to WebmasterWorld Guest from 23.20.34.25
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Looking for 3-column CSS layout with fluid right column
Pointer to a proven design much appreciated!
metaman




msg:1221366
 3:31 am on Aug 28, 2005 (gmt 0)

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!

 

4css




msg:1221367
 6:09 am on Aug 28, 2005 (gmt 0)

Hi metaman
Welcome to webmasterworld.

Have you tried to do a google search on 3 column css layouts? There are numerous ones out there that are really great. You could even search webmasterworld with google search, Here is one thread [webmasterworld.com] That might be of some help.

For some of the requests that you have in your post, I think you are going to need to do some of this on your own. But at least you have the basic layout to get you started. IT as done by SuzyUK so it should be a really good one. As I stated you most likely are going to have to mess around with it as you go along.

Also, you should try to have most of your content layed out first before you style. This way you know that your content is going to be viewable by other user agents. My preference is xhtml strict. However, that is only my preference.

As you are working with any layout/css template that you come across via search I know that any trouble that you have you can post in here and someone will be more then happy to help you out.

hth!
4~css

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved