Hi,
To realize the prototype, I started from moving ".col1" to the top of "main".
I wrote,
main {
position: relative;
}
.col 1 {
top: 0;
}
But it doesn't work.
How would I do?
Hosun Kang
1 Correct answer
That's because you are aligning the columns to be vertically centered in the 'main' div - align-items: center;
main {
display: flex;
align-items: center;
padding: 0px 40px;
position: relative;
}
It looks as though your prototype column widths are all different, so use flex-basis as the width rather than flex: 1;
Col 1:
flex-basis: 30%;
Col 2:
flex-basis 20%;
Col 3:
flex-basis: 50%
3
Replies
Hi,
Thank you very much for your reply.
If you look at the grey rectangle, there is a gap between the white lines and the bottom of the browser.
(The white lines come from border-left and border-right in ".col2".)
How can I stretch the two white lines to the bottom of the browser?
(All that I can think of is adding some margin.
I just wonder if there is any better way.)
Hosun Kang
AdChoices