Multi-Columns with different widths

[micha1451]

Hi,
I looked at your tutorials regarding multi-columns with different widths.

One thing I do not understand:
Must the outer columns always have the same width?

I want to use 3 columns with different widths following:
left: 20% width
middle: 45%
right: 30%

In your samples the outer columns have always the same width.

thanks and regards
Michael

[micha1451]

Thank you, it’s done…

<div class=”col-left”>Put your Left column stuff here.</div>
<div class=”col-middle”>Put your middle column stuff here.</div>
<div class=”col-right”>Put your Right column content here.</div>
<div class=”clear-cols”></div>

CSS
.col-left {float: left; width: 20%; margin-right:2%; margin-bottom:2%;padding:2px; moz-box-sizing:border-box;-webkit-box-sizing:border-box; box-sizing:border-box;background-color:grey;overflow:hidden} /*sets the width for the left column*/

.col-middle {float: left; width: 45%; margin-right:2%; margin-bottom:2%;padding:2px; moz-box-sizing:border-box;-webkit-box-sizing:border-box; box-sizing:border-box;background-color:grey;overflow:hidden} /*sets the width for the middle column*/

.col-right {float: left; width: 30%; margin-right:2%; margin-bottom:2%;padding:2px; moz-box-sizing:border-box;-webkit-box-sizing:border-box; box-sizing:border-box;background-color:grey;overflow:hidden} /*sets the width for the right column*/

.col-right {margin-right:0px;} /*removes the right margin on the last one*/

[Author]

Posts