Why is the second div in my container not showing?

Question

I'm creating two divs next to each other using code I found on another thread. The problem is that the first div should have a fixed value and the second should just fill the rest, but it seems like it just removes the second div when I'm trying to give it a percentage:

     #wrapper {
         width: 100%;
         overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
         height: 150px;
         margin-bottom: 10px;
         overflow-y:hidden;
     	overflow-x:hidden;
     	border-radius: 10px;
     	background-color: #f1f2f4;
     }
     #first {
         float: left;
         width: 150px;
         height:150px;
     }
     #second {
     	width:100%;
     	height:150px;
         float:left;
    	padding: 1.5em;
     }

    <div id="wrapper">
        <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
        <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
    </div>

Image:

Answer 1

Why the problem occurs:

You have #second { width:100%; }. This means that both elements won't fit next to each other since the second one will need the full width of the container. But the first element already takes all the height, and you have overflow: hidden; so the second one goes out of the container (below) and is not visible at all. Just to see where it went you can reduce the height of the first item a bit (say from 150px to 120px).

---

Your layout can very easily and intuitively be achieved with flex-box instead of floats. All modern browsers support it now.

#wrapper {
    width: 100%;
    margin-bottom: 10px;
    overflow:hidden;
    border-radius: 10px;
    background-color: #f1f2f4;
    display: flex;
}
#first {
    width: 150px;
    height:150px;
    flex-grow: 0;
    flex-shrink: 0;
}
#second {
  width:100%;
  height:150px;
  padding: 1.5em;
}

<div id="wrapper">
    <div id="first">
        Lorem ipsum whatever I'm writting in here.
    </div>
    <div id="second">
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
        Lorem ipsum whatever I'm writting in here.
    </div>
</div>

Answer 2

The probem is you set width:100% and float, with 100% there is no way that div can floats aside the previous one.

• You can remove the float and width on the second one, but maybe you can't handle well the padding:

#wrapper {
  width: 100%;
  overflow: auto;
  /* so the size of the wrapper is alway the size of the longest content */
  height: 150px;
  margin-bottom: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #f1f2f4;
}
#first {
  float: left;
  width: 150px;
  height: 150px;
}
#second {
  height: 150px;
  padding: 1.5em;
}

<div id="wrapper">
  <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
  <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

• Or use calc and box-sizing to determine the width:

#wrapper {
  width: 100%;
  overflow: auto;
  /* so the size of the wrapper is alway the size of the longest content */
  height: 150px;
  margin-bottom: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 10px;
  background-color: #f1f2f4;
}
#first {
  float: left;
  width: 150px;
  height: 150px;
}
#second {
  box-sizing:border-box;
  float:left;
  width:calc(100% - 150px);
  height: 150px;
  padding: 1.5em;
}

<div id="wrapper">
  <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
  <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>