Div width percentage not working in CSS

Question

Here is my CSS:

.leftdiv {
    width:20%;
    border:2px solid blue;
    float:left;
}

.middlediv {
    width:60%;
    border:1px solid orange;
    float:left;
}

.rightdiv {
    width:20%;
    border:1px solid black;
    float:right;
}

Here is my html:

<body>
    <div class="leftdiv">left</div>
    <div class="middlediv">middle</div>
    <div class="rightdiv">right</div>
</body>

What I expect to see is three divs across the screen taking up 100% of the screen width.

Instead see this:

The right div is on the next line.

similar issue https://stackoverflow.com/questions/39284679 – kukkuz Oct 01 '17 at 02:56 — kukkuz, Oct 01 '17 at 02:56

score 2 · Answer 1 · answered Sep 30 '17 at 23:11

The issue is that padding and border are, by default, calculated in addition to the width, not included in the width value. You need to use the box-sizing: border-box override to have them included:

div { box-sizing: border-box; }

Or, preferable, add it to each individual div's style block (because you might not want to blanket apply it to all divs on the page).

.leftdiv,.middlediv,.rightdiv{
  box-sizing: border-box;
}

Example: https://codepen.io/anon/pen/RLZWWO

Willem van der Veen · Accepted Answer · 2017-09-30T23:28:38.410

This is because of the borders. If you leave out the borders your div will align. Using the border-box solves the problem:

 .leftdiv{
box-sizing: border-box; 
width:20%;
border:2px solid blue;
float:left;}

.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}

.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}

The idea of a box-sizing: border box is that it modfies the behaviour of the normal box model to treat the padding and border as a part of the width element. So now when you set the % width the border is already taken into account. This is why now the 20+20+60 amount to 100%.

Additional info can be found in this link

score 1 · Answer 3 · answered Sep 30 '17 at 23:10

1

The border takes up additional space that is not accounted for in the div width. Try adding box-sizing: border-box; to each of your div classes.

answered Sep 30 '17 at 23:10

B. Fleming

7,170
1
18
36

Johannes · Answer 4 · 2017-09-30T23:39:31.380

You should add this:

html, body {
  margin: 0;
}

to reset the default margin of the all-wrapping body and html element to zero

and

* {
  box.sizing: border-box;
}

to include padding and borders in your percentage values.

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.leftdiv {
  width: 20%;
  border: 2px solid blue;
  float: left;
}

.middlediv {
  width: 60%;
  border: 1px solid orange;
  float: left;
}

.rightdiv {
  width: 20%;
  border: 1px solid black;
  float: right;
}

<body>
  <div class="leftdiv">left</div>
  <div class="middlediv">middle</div>
  <div class="rightdiv">right</div>
</body>

Div width percentage not working in CSS

4 Answers4

Related