0
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;
}
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
I've tried using the Vertical-align property but it doesn't do anything. What do I want to happen
2 answers
0
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;
}
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
AboutLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in euismod est. Curabitur euismod ultrices pellentesque. Morbi condimentum venenatis nibh sed feugiat.
0
Hot tools Tags
Hot Questions
Popular tool
vc9-vc14 (32+64 bit) runtime library collection (link below)
Download the collection of runtime libraries required for phpStudy installation
VC9 32-bit
VC9 32-bit phpstudy integrated installation environment runtime library
PHP programmer toolbox full version
Programmer Toolbox v1.0 PHP Integrated Environment
VC11 32-bit
VC11 32-bit phpstudy integrated installation environment runtime library
SublimeText3 Chinese version
Chinese version, very easy to use
Hot Topics
20416
7
13576
4