0

I have two divs, .instructions and .personal_info, that I want stacked on top of another. .personal_info has top and bottom borders. The two divs seem to be overlaid on top of one another, which is not what I want. I want .instructions to remain where it is, but I want .personal_info to appear below it.

Please let me know what I'm missing here. My code is below:

.instructions {
  width: 100%;
  padding: 10px;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
}
<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>
Serlite
  • 12,130
  • 5
  • 38
  • 49
Dave
  • 1,257
  • 2
  • 27
  • 58
  • Possible duplicate of [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing) – Serlite Sep 22 '16 at 17:51
  • Did the answers help? – Mike Rodov Sep 26 '16 at 06:31

4 Answers4

0

Better to use CSS display:flex Code

<div style="display:flex;">
    <div style="width:33%; background-color:wheat;">Left</div>
    <div style="width:33%;">Center</div>
    <div style="width:33%; background-color:snow">Right</div>
</div>
xhtml6
  • 1
  • 1
0

You need to clear the floated elements, just use overflow: hidden on .instructions:

.instructions {
  width: 100%;
  padding: 10px;
  overflow: hidden;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
}
<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>

More about clearing floats can be found here, and here.

Khaled Mashaly
  • 1,115
  • 9
  • 16
0

Take a look here Possible Solution

.instructions {
  width: 100%;
  padding: 10px;
  background-color: blue;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  position: absolute;
  top:0;
  width: 100%;
  z-index: -1;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
  background-color:red;
}

It's not really clear whats the whole picture but for the excersize above you can do few things:

  1. position personal_info before instructions so it would be drawn first and set position:absolute to instructions

    1. set personal_info to be position:absolute, top:0, z-index:-1 this will remove the personal_info from normal html generation flow and will position it right below to it's sibling .instructions Giving it z-index will make sure it stays below (if it's zindex is lower then instructions)

I'd also advice you to start using "display: flex" for positioning of "columns"

Mike Rodov
  • 569
  • 1
  • 4
  • 18
0

You just need to add a display: flex; to your instructions class.

According to W3Schools, the flex value:

Displays an element as an block-level flex container.

While not entirely related to your issue, you can learn more about how floats can affect block-level elements from this answer.

Community
  • 1
  • 1
Gavin
  • 4,365
  • 1
  • 18
  • 27