Why is the second div in my container not showing?

Question

Why is the second div in my container not showing?

I am creating two divs next to each other using the 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 try 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">Qaru 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>

Run code

Picture

enter image description here

+3

html css css3

Peter pik Dec 18 14 at 14:59

source to share

4 answers

In the request, you set width:100%

and float

, but 100%

there is no way for the div to float towards the previous one.

You can remove the float and width on the second one, but you might not be able to handle padding well:

#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">Qaru 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>

Run code

Or use calc

and box-sizing

to define 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">Qaru 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>

Run code

+3

DaniP Dec 18 14 at 15:05

source to share

The #wrapper element has a fixed height. The #second element is at the bottom.

+2

Samih Dec 18 14 at 15:05

source to share

Since the "second" spans the entire width, it wraps to the next line and is hidden because the container has a fixed height. Just remove the width and float attributes from the "second" div.

+1

Daniels118 Dec 18 14 at 15:08

source to share

Alin purcaru · Accepted Answer · 2014-12-18T15:04:35+0000

Why the problem occurs:

You have #second { width:100%; }

. This means that both elements will not be positioned next to each other, since the second will require the full width of the container. But the first element already takes up the full height and you have overflow: hidden;

, so the second one comes out of the container (below) and is not displayed at all. To see where it goes, you can slightly reduce the height of the first element (say from 150 to 120px).

Your layout can be easily and intuitively implemented using flex-box

floats instead. 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>

Run code

Why is the second div in my container not showing?

More articles: