Column Widths

[kez2]

Hi there,

I am having some trouble setting the middle column width so that it fits the pictures without pushing the right hand or left hand columns out of position.

Could someone please tell me what I need to do with the numbers as whatever I seem to try either:
1) mess up the layout entirely
2) change the layout but leave the grey divider lines where they are.

(I realize the top banner is not going to be wide enough to go all the way across the but I will change this later)

Thanks in advance,

Kez

/*---:[ core layout elements ]:---*/

#container { width: 895px; margin: 0 auto; padding: 20px 0; }

#page { } /* for use with custom styles */

#masthead { width: 865px; margin: 0 0 20px 0; padding: 0 10px; text-align: left; }

#rotating_image { width: 885px; margin: 0 0 20px 0; }

#rotating_image img { display: block; border: 10px solid #eee; }

#content_box { width: 865px; padding: 0 10px; background: url('images/content_bg.gif') 50% 0 repeat-y; text-align: left; }

#left_box { width: 665px; float: left; }

#content { width: 463px; padding: 0 1px; float: right; }

#content_inner { width: 445px; padding: 0 9px; }

.sidebar { width: 190px; float: left; }

#left_bar { padding: 0 10px 0 0; }

#right_bar { padding: 0 0 0 10px; }

#footer { padding: 1.0em 0; border-top: 1px double #ddd; }

[edited by: SuzyUK at 7:31 am (utc) on July 18, 2009]
[edit reason] no URIs per Charter [WebmasterWorld.com] [/edit]

[marcel]

Hi Kez2 and Welcome to WebmasterWorld [webmasterworld.com]

The best thing to do is re-scale your images in a Image processing program.

If you don't have control of what images are being placed (customer CMS etc.) you could try something like the following:

#content_inner img
{
max-width: 400px;
}

[SuzyUK]

Welcome to WebmasterWorld! [webmasterworld.com] kez

change the layout but leave the grey divider lines where they are.

I presume your grey divider lines are being produced by a "faux columns" background image, the one set on your content_box? as floated columns do not know the height of each other.

I could be that you simply have to redo that image to fit your new required width of your content. At the minute the center section of bg image should be no more than 465px wide, which is the width of your content div, but if you make that content div wider to widen the layout to fit the images you would also need to redo the background image to fit too when faux columns are used.