What makes the floated div width shrink?

Question

Am just learning responsive design and would like to have a true understanding of what causes this.

#container {
  border: 2px solid red;
  position: relative;
}

#box1 {
  border: 1px solid blue;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

#box2 {
  border: 1px solid green;
  width: 33%;
  position: relative;
  display: inline;
}

#box3 {
  border: 1px solid yellow;
  float: right;
  width: 33%;
  position: relative;
  display: inline;
}

<div id="container">

  <div id="box1">BOX1</div>
  <div id="box2">BOX2</div>
  <div id="box3">BOX3</div>

</div>

. BOX2 does not expand to 33% as it seems. floating the items and using clearfix was one way to get BOX2 to expand as seen here .

#container {
  border: 2px solid red;
  position: relative;
}

#box1 {
  border: 1px solid blue;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

#box2 {
  border: 1px solid green;
  width: 33%;
  position: relative;
  display: inline;
  float: left;
}

#box3 {
  border: 1px solid purple;
  float: left;
  width: 33%;
  position: relative;
  display: inline;
}

<div id="container">

  <div id="box1">BOX1</div>
  <div id="box2">BOX2</div>
  <div id="box3">BOX3</div>
  <div style='clear:both'></div>

</div>

i would like to understand 1. WHY the browsers renders it as such 2. how to make the 3 boxes stay adjacent to each other even when i resize the browser window to its lowest possible size.

for the 2) you need to add `box-sizing:border-box` .. your are using border so it make the width slightly bigger then 33% and you have line break — Temani Afif, May 08 '18 at 22:37
@Temani Afif can you check this out pls https://jsfiddle.net/orn6sLmz/ box-sizing is not an issue as my total computed width is 99% unlike in the duplicate answers above. my issue here is that display:inline does apply width correctly but block does, adding float to box2 changes display to block and applies width correctly. my query now is why does width not apply correctly with inline display. Thank you for your time. — Broody1987, May 11 '18 at 14:06
simply because this is the nature of inline elements, you cannot apply width to them .. and box-sizing is an issue as the total width is not 99% but 99%+the border in the left and the right, so reduce the screen and the layout will break — Temani Afif, May 11 '18 at 14:19
@TemaniAfif Thanks for the clarification. you're right about it breaking the layout when screen is reduced. Did not know width did not apply to inline elements. Appreciate your help. Thanks :-) — Broody1987, May 11 '18 at 14:39

What makes the floated div width shrink?

0 Answers0