How to make floated elements stack vertically instead of horizontally in CSS?
P粉982054449
P粉982054449 2024-04-06 20:45:26
0
2
654

I'm trying to make a webpage with two columns, one side with main content and the other with additional content. But because I'm 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 class="def column side " ;>
      <strong class="topicheader">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 class="def column side " ;>
      <strong class="topicheader">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've tried using the Vertical-align property but it doesn't do anything. What do I want to happen

P粉982054449
P粉982054449

reply all(2)
P粉715274052

Use clear: Both; attribute.

.column.side{
    clear:both;
}
P粉792673958

Columns can be stacked vertically by using column. 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;
}
About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!