Hey guys,

First post here and I need a little bit of help. I'm no noob to html and css but I'm stumped and need a little bit of help.

Here is my issue: I'm trying to achieve the results I have in the image below. Basically Div1 is centered and its width is 98% of the body, so it adjusts depending on the screen resolution of the user. Div2 and Div 4 will always have fixed widths 218px and 209px.

Div3 is the tricky one, I need it to adjust to the size of the screen just as Div1 does. The problem here is that it if I use width at 100% it will kick Div4 out of position.



Any ideas? Thanks,

The problem is that you are using fixed width with your two sidebars.

You need to set div 2, 3, 4 all on percentages. Look into my thread about fluid design (the one with the "aaaargh" at the end).

One problem about percentages: "width" only refers to inner width, that means padding and borders are not included in width.

To make this work you need a model that's called outside-in box model.

It's not a easy one but I got it to work.

I recommend Michael Bowers' "Pro CSS and HTML design patterns" where he goes through every single thing CSS can do, and this all on a very practical level.