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>