Home/ Questions/Q 8856167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:17:55+00:00

I want to make three columns in HTML+CSS, first 15%, second 70% and third

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @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.

    • 0