CODEWITHSUNDEEP
htmlcsspercentagemultiple-columns
marxin
marxin

Reputation: 3922

CSS columns percentage does not work as expected

I want to make three columns in HTML+CSS, first 15%, second 70% and third 15%. The problem is that with my code, third column is wrapping down when i resize window. I've written such CSS for my website:

.maincont {
      margin-left: 0px;
      margin-right: 0px;
      width: 100%;
    }

.lcol,
.rcol,
.content {
      display: inline;
      float: left;
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
    }

.lcol {
      width: 15%;
      background-color: red;
    }

.rcol {
      width: 15%;
      background-color: green;
    }

.content {
      width: 70%;
      background-color: blue;
    }

HTML code:

<body>

  <div class="maincont">
    <div class="lcol">
    </div>
    <div class="content">
    </div>
    <div class="rcol">
    </div>
  </div>

</body>

What am i doing wrong? Thanks in advance.

Upvotes: 3

Views: 3513

Answers (3)

Adam Jenkins
Adam Jenkins

Reputation: 55643

@Maccath is absolutely correct. Instead of changing any of your numbers however, might I suggest adding this to the top of your CSS file:

* { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
  }

Support for everything newer than IE8 - your widths and heights will incorporate paddings. Also, change your margin numbers in your CSS to padding instead and you'll get your desired result.

Upvotes: 5

Maccath
Maccath

Reputation: 3956

The margins on .content are your problem. Margins are adding to the width of your overall content, so it's 20px over 100% width in total, which is why it's forcing the columns to wrap.

I would advise to use a percentage margin on .content instead. Reduce .content's width to, say, 66% and then set the margin to ... 0.66% (weird maths since it's relative). This however does have the disadvantage that the gaps between your columns aren't going to be consistent based on the width of the browser window.

Upvotes: 3

Ania Lasocka
Ania Lasocka

Reputation: 78

remove 

margin-left: 10px;
margin-right: 10px;

it resizes div size and summary it is more than 100%

Upvotes: 1

Related Questions