View Full Version : Centered 2 column layout with fixed width AND percentage width

10-30-2008, 05:54 PM
I need to create a centered 2 column layout using a combination of fixed width AND percentage width (and also using min and max width for the body or container).

The body/container min/max width will be 770 to 970 pixels wide.
The right column is 360 pixels wide.
The left column should be stretching to fit the remaining width.

I searched around and found a couple of solutions, but none that approached satisfying all of the above needs.

Can anyone help?

10-31-2008, 05:15 AM
Try making a container with your set width, 770px or 970px, then set the width on the right column and float it right, then use width: 100% and float the left column left. See if that works.

10-31-2008, 01:26 PM
I could tell you that wont work without even trying it.
What you will get is one column 100% width of the wrapper and another column, floated right, forced underneath it.

10-31-2008, 01:41 PM
Here is the css I am currently using.

bandMain is the wrapper.

body { margin: 0 auto; padding: 0; background: #ccc;}

#bandMain * { margin: 0; padding: 0; text-align: left; list-style-type: none;}

#bandMain { display: inline-block; font-family: Helvetica, Arial, sans-serif; margin:0; padding: 10px 0 0 0; min-width: 770px; max-width: 970px; background: #fff; min-height: 450px; text-align: left; border: dashed 2px #ccc; }

#leftChunk {
float: left;
padding: 30px;
width: 45%;

#rightChunk {
position: relative;
background: #fff;
display: inline-block;
float : left;
padding : 15px 10px 15px 10px;
width : 360px;
border : 1px solid #ccc;
margin: 10px 10px 40px 10px;
font-size: 12px;
line-height: 14px;