Problems with stacking div boxes vertically

Question

I have the following code:

.blueleft {
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: left;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

.blueright{
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: right;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

However I still get the box elements stacked horizontally like this:

I'm not sure what I need to do to make sure that the div boxes stack vertically, and still be able to format horizontally and centered if needed. I've been looking around but have been unable to find code that I could put into the html document.... how would I start from scratch when formatting the DIV elements in css?

Post your HTML please. We need a [mcve]. But the issue seems to be your use of floats — j08691, Oct 24 '18 at 17:11
What exactly are you trying to achieve? If you want you could put `display : block` to stack them vertically. — Vipul Sharma, Oct 24 '18 at 17:11
Possible duplicate of [How do I automatically stack divs vertically inside a parent?](https://stackoverflow.com/questions/19284923/how-do-i-automatically-stack-divs-vertically-inside-a-parent) — Heretic Monkey, Oct 24 '18 at 17:38
@LucasWieloch I've already tried removing my float codes and even my margin codes. — robbydoe, Oct 25 '18 at 16:49
@j08691 for the html I simply did
and floated an image withing the div element, along with adding some text. For the other box element I tried both
and
I also tried automatic and relative position tags but they didn't work either. — robbydoe, Oct 25 '18 at 16:52
@VipulSharma All I'm trying to do is to get my div elements to flow vertically. I'm working on a mini website choose your own adventure type game and would like it to be formatted vertically for some of the website pages. Hopefully that clarifies it a little! — robbydoe, Oct 25 '18 at 16:55

score 0 · Accepted Answer · answered Oct 24 '18 at 17:30

Here is a simple example with Flexbox:

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

Problems with stacking div boxes vertically

1 Answers1