How do I make floated elements stack vertically instead of horizontally in CSS?-CodePudding

I am trying to make a web page with a two columns with one side having the main content and the other having extra stuff. But because I am using the float property to align the extra column to the left, it stacks horizontally but I want it to stack vertically.

My current code:

 .topicheader {
    padding: 2% 2%;
    float: left display: block;
    background-image: linear-gradient(to top, rgb(40, 40, 40), rgb(50, 50, 50));
    font-size: 125%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px black;
  }

 .column.side {
    z-index: 1;
    width: 25%;
    float: right;
  }

  <div>
    <div  ;>
      <strong >About</strong>
      <p style="color:white;">
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
      </p>
    </div>

     <div  ;>
      <strong >About</strong>
      <p style="color:white;">
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
      </p>
    </div>
  </div>

I have tried using the vertical-align property but it does nothing. What I want to happen

CodePudding user response：

By using column you stack the columns vertically. By using row the columns are side-by-side.

.container {
    display: flex;
    flex-direction: column; /* stack vertically */
}
.column {
    height: 50vh; /* half of view height */
}

/* for example some colors */
.column:first-child {
    background-color: orange;
    color: blue;
}
.column:last-child {
    background-color: blue;
    color: orange;
}

<div >
    <div >
        <strong >About</strong>
        <p style="color:white;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
    <div >
        <strong >About</strong>
        <p style="color:white;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
        </p>
    </div>
</div>

CodePudding user response：

Use clear: both; property.

.column.side{
    clear:both;
}