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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use
clear: Both;attribute..column.side{ clear:both; }Columns can be stacked vertically by using
column. By usingrowthe 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; }