Home Forums Weaver Xtreme Theme Multi-Columns with different widths

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18151
    micha1451
    Participant

    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

    #24086
    micha1451
    Participant

    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*/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.