Why are the divs collapsing when I don't set "float: left" for the second div-CodePudding

When I use float: left for both the divs in my code they work fine but if I remove the float: left property from the second div then both the divs collapses leaving the DIV #2 text undisturbed. I am really not able to figure out why this is happening . Any help is greatly appreciated

1) float : left --- used for both divs :

div {
  width: 250px;
  height: 100px;
  border: 5px solid black;
  color: black;
  font-weight: bold;
  margin: 25px;
}

* {
  margin: 0px;
}

div#d1 {
  background-color: red;
  vertical-align: top;
  float: left;
  text-align: center;
  padding: 15px;
}

div#d2 {
  float: left;
  background-color: green;
  padding: 25px 50px 6px 6px;
}

<div id="d1">
  <p> DIV #1</p>
</div>

<div id="d2">
  <p> DIV #2</p>
</div>

2) float : left --- not used for second div :

div {
  width: 250px;
  height: 100px;
  border: 5px solid black;
  color: black;
  font-weight: bold;
  margin: 25px;
}

* {
  margin: 0px;
}

div#d1 {
  background-color: red;
  vertical-align: top;
  float: left;
  text-align: center;
  padding: 15px;
}

div#d2 {
  /*float: left;*/
  background-color: green;
  padding: 25px 50px 6px 6px;
}

<div id="d1">
  <p> DIV #1</p>
</div>
<div id="d2">
  <p> DIV #2</p>
</div>

CodePudding user response：

The float property removes the element from the normal flow of the page. If you use it in two elements then the two elements can be next to each other, however if you only use one of them, then the other element position will be the default (left upper corner), and the floating element will be on a separate "layer" where it's floating left.

https://developer.mozilla.org/en-US/docs/Web/CSS/float

CodePudding user response：

float is not intended for placing text blocks next to each other, as you are implying.

The typical ´float´ situation is a floated image inside a (not floated) text block, where the text (i.e. the contents) will float around the image (depending on the float setting, left or right and below it, and also above it, if the floated element isn't inserted at the beginning of the text). Here is an example for this situation:

img {
  float: left;
  width: 240px;
  height: auto;
  margin-right: 6px;
  margin-bottom: 6px;
}

<div>
  <img src="https://picsum.photos/400/300">
  <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
    nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
    adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus
    tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
    enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</div>

Back to your problem: To place elements next to each other, use display: inline-block and defined width settings for all of these elements.

.textblock {
  display: inline-block;
  width: 300px;
  border: 1px solid #ddd;
  padding: 0 10px;
}

.t1 {
  background: red;
}

.t2 {
  background: green;
}

<div >
  <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
    nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div >
  <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>