CSS: variable width side panels with fixed centre

Question

I require the following layout, with three columns, left, content & right.

The left and right content simply will have an image within them, and the left col. Image needs to stay to the left of the browser, and the right col. Image to the right side of the browser, so when the browser width is resized both the columns stay to their edge.

Where as the content/centre column needs to be a fixed with of 960px and also remain in the middle of the screen.

So on resize the browser width the content stays in the middle, but then when the browser is width is reduced both left and right columns do not go over the main content but stay either side.

I have tried multiple times but am having much success at present, any help would be appreciated.

thanks si

UPDATE:

As requested I have added a jsfiddle of what I have tried:

http://jsfiddle.net/UcmBj/

I get to 99% of what I want but the content remains centred and the right stays to the right but ideally I would like it so the content and the panels remain centered.

At the moment if scaled down the left column and part of the content is viewable but I would like the content to be viewed in the window/centred so the left column is displaced to the left off the screen. thanks hope the link helps.

Bit of details: side columns should be min width of 280 and the content section width of 960 set, thus the outer container min 1520.

Are you trying to achieve something like the adverts at the side on dabs.com? If so, check how they did theirs (a single background image 3000 pixels wide) — Richard
– Richard, Commented Aug 6, 2012 at 11:21
Thanks Richard, in a way yes, with regards centering, but the image in the left column must align left flush to the browser edge and the same with the right img, flush to the right edge — Simon Davies
– Simon Davies, Commented Aug 6, 2012 at 11:30

user1601517 · Accepted Answer · 2012-08-16 22:44:31Z

0

Does this help you at all?

http://www.manisheriar.com/holygrail/index.htm

http://jsfiddle.net/andresilich/6vPqA/3/show/

answered Aug 16, 2012 at 22:44

user1601517

214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Davies Over a year ago

Thanks for the advice and Eg, but the centre bit is also resizing, that.

Simon Davies · Accepted Answer · 2012-08-30 07:58:16Z

0

Well having looked around, looks as if Its not possible just yet for how I wanted to do it, so what I did was have my left and right columns positioned using css to the left and right, then using css media queries added a negative margin to each so that they would move so not interrupting the main content.

answered Aug 30, 2012 at 7:58

Simon Davies

3,6949 gold badges45 silver badges71 bronze badges

Collectives™ on Stack Overflow

CSS: variable width side panels with fixed centre

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related