two column layout HTML/CSS

Question

I'm trying to create a two column layout. Instead of it I'm getting rows one above other.

This is my code:

.container {
  width: 90%;
  margin-left: 40px;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
}

#pre-header {
  background-color: #CC4E0B;
  color: white;
  margin: -14px 0 -14px 0;
  text-align: right;
}

.column {
  width: 50%;
  padding: 10px;
  float: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div id="pre-header">
  <div class="container">
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h3>Columns1</h3>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h3>Column 2</h3>
      </div>
    </div>
  </div>
</div>

Does anyone see what is going on wrong?

50% + padding is more than 50%. Apply `box-sizing:border-box` to the columns. — Paulie_D, Jan 08 '18 at 21:50

score 1 · Answer 1 · answered Jan 08 '18 at 22:03

You are using padding: 10px. This mean 10px in padding-top right buttom and left and the 50% in width in .colum so to your 50% it add 20px (for padding-left and right) for this the column didn't fit in the row container. To fix this you have to add box-sizing: border-box; this mean, all padding you add to the box will be introduced inside.

.container {
  width: 90%;
  margin-left: 40px;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
}

#pre-header {
  background-color: #CC4E0B;
  color: white;
  margin: -14px 0 -14px 0;
  text-align: right;
}

.column {
  width: 50%;
  padding: 10px;
  float: left;
  display:inline-block;
  box-sizing: border-box;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div id="pre-header">
  <div class="container">
    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h3>Columns1</h3>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h3>Column 2</h3>
      </div>
    </div>
  </div>
</div>

Excuse me for English errors :D

score 0 · Answer 2 · answered Jan 08 '18 at 21:59

0

Solution 1:

.column {box-sizing: border-box;}

Solution 2:

.column {width: calc(50% - 2*10px);}

answered Jan 08 '18 at 21:59

Andrei Fedorov

3,689
2
13
25

score -1 · Accepted Answer · answered Jan 08 '18 at 21:54

-1

Your columns have width of 50% + padding 10px.Naturally they can't fit to row.

answered Jan 08 '18 at 21:54

yosef aronov

36
2

score -1 · Answer 4 · answered Jan 08 '18 at 22:00

-1

Try column without padding or decrese width of column

answered Jan 08 '18 at 22:00

Kuba Zabielski

146
2
10

two column layout HTML/CSS

4 Answers4