div moves incorrectly on browser resize

Question

I'm trying to set-up a shopping cart for my site, and I lack some knowledge in correctly using css to format the three columns when the browser is resized.

The css originally had the following:

.threeFrames .leftStyle {float: left; position: relative; width: 20%;}
.threeFrames .centerStyle   {float: left; position: relative; max-width: 60%;}
.threeFrames .rightStyle    {float: left; position: relative; width: 20%;}

But this didn't have the effect I wanted. I want to set the two end columns to fixed width 240px however, when I do this, when the browser is resized, it bumps the right hand column below the others, whereas I want just the middle column to shrink.

margin / padding? + as for me `.rightStyle` should be `float:right` & `.centerStyle` with no floating..... — Subdigger, Aug 05 '11 at 11:14
you should [search](http://stackoverflow.com/search?q=css+3-column) before asking — Subdigger, Aug 05 '11 at 11:16

score 1 · Answer 1 · answered Aug 05 '11 at 11:13

1

If you make .rightStyle {float:right;} and don't style the middle column at all, it will automatically wrap around when possible.

answered Aug 05 '11 at 11:13

phihag

278,196
72
453
469

div moves incorrectly on browser resize

1 Answers1