3

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.

4

3 回答 3

5

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

于 2012-11-15T12:22:03.797 回答
3

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.

于 2012-11-15T12:12:27.837 回答
1

remove 

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

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

于 2012-11-15T12:16:11.300 回答