Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Looking for 3-column CSS layout with fluid right column

Pointer to a proven design much appreciated!

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

New User

10+ Year Member

joined:Aug 28, 2005
votes: 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!

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
votes: 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.



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members