PDA

View Full Version : Want to fix width of main content while each of 2 sidebars shrink when re-sizing page


BarryD
03-10-2009, 08:57 PM
Hello - I'm designing my first page with Dreamweaver and am just learning xhtml and css. I've read a bit, tried tutorials and viewed videos on LYNDA.COM (which are quite good); but, I'm not up to speed yet. I want to create a page that contains two sidebars, main content, header and footer. I'd like to color each sidebar with two shades but not add any text to either sidebar. I'd like the page to fill the entire screen. Here's my dilema: Because of my inexperience, I chose a standard layout (as above). The page fills the entire screen (as I want it to); but when I resize the screen in my browser (IE 7), the width of all page elements shrink. I want the width of the sidebars to shrink, but I want the width of the main content to remain constant until the width of the main content forces the page to scroll. I've tried all varieties of layouts like, liquid, elastic, and hybrid. I want to use CSS to get the style I want but am not getting anywhere. I want to use CSS as much as possible. Is there a clever way of doing this with a DW style (3 column, header, footer)?

If I can't use this method, my backup plan would be to use one column and add a background color to the body div. This seems like an easier approach (easy is not my usual approach). Can I make the background of the body more than one color? Thanks for any and all suggestions.
Barry

coloeagle
03-10-2009, 11:17 PM
To designate a color for the body background you can only designate one.

Give your main content div a fixed width and allow your two side bars to be fluid.

BarryD
03-11-2009, 04:58 PM
Your CSS web site is interesting. Have you seen this site? - http://www.csszengarden.com/ It is really inspiring. I used to be a researcher in biology, but I've been retired for six years now. I've got several hobbies, and learning Dreamweaver is my most recent - I've had the program for about two months.
Your suggestion is exactly what I need: Fixed-width main content and two Liquid-width sidebars. Can I modify a DW, "3 column liquid, header and footer", page layout to do this? The first line of HTML is:
<body class="thrColLiqHdr"> I don't know what property needs to be added or changed. Likewise, ".thrColLiqHdr #mainContent, .thrColLiqHdr #sidebar1, and .thrColLiqHdr #sidebar2", etc need to be edited. Any suggestion?
Do you think it would be best to start from scratch with a blank page?
These are elementary questions; but, you know, one fool can keep 100 wise men busy!

Corrosive
03-11-2009, 05:44 PM
Do you think it would be best to start from scratch with a blank page?

Yes, yes, yes and errrrm. Yes!!

coloeagle
03-11-2009, 05:57 PM
I must concur with Corrosive.

Doing this type of set up is the opposite of what is normally done (fixed sidebars with a fluid center)

Not sure about doing it with DW as it would require a little css trickery and negative margins.

If you want I could do up something like this and post it to my site for you to see. Take about ten minutes.

coloeagle
03-11-2009, 05:59 PM
Thanks for the compliment on my site. Very familiar with zengarden. One of the sites that inspired me to have the "Beauty of CSS" page on mine

BarryD
03-11-2009, 06:21 PM
Thanks! I really would appreciate it if you could post an example on your site. I agree with all of you that I should get a fresh start. I found a page on CSS ZenGarden that is my ideal, regarding fixed main content and liquid side bars. It's truely amazing: http://www.csszengarden.com/?cssfile=145/145.css
I down-loaded the CSS; but, it's beyond me, I'm afraid.

Corrosive
03-11-2009, 06:30 PM
I must concur with Corrosive.



Does that hurt and will I need a bath afterwards?

coloeagle
03-11-2009, 06:32 PM
Been working on it and ,,,well ok took a little longer than I thought. :mrgreen:

http://validwebdesigns.com/css/3-column-fixed-center.php

Note;
Gave the center column a 500px width. This will allow those that have a browser of 800px wide to have approximately 150px width for the sidebars.

coloeagle
03-11-2009, 06:34 PM
Does that hurt and will I need a bath afterwards?
Nah I promise it won't hurt and yup a bath could be helpful
[and I thought it was my screen that needed cleaning] :lol:

BarryD
03-11-2009, 11:53 PM
Thank you very much. It looks great. I'm going to try it tonight in DW. This will get me going - greatly appreciated! Much more code to stumble through . . .

BarryD
03-12-2009, 12:18 AM
I tried it in DW and it works. Interesting, how you used negative margins.