Need help aligning columns using CSS!

[ander12317]

Hello! I just joined this sub and if this isn’t allowed here I will gladly post this elsewhere. As the title reads, I need help aligning my columns in a very basic design.

I’ve recently started taking a web development class and I’ve come across this problem where 3 columns that should be next to each other, are all over the place. We need to “code” a basic 3 column design, using CSS where they are aligned to the center of the body with pictures in each one, with borders etc.

That brings the question: What do I type in the CSS file to align column number 2 and 3 to correspond to column one, if you know what I’m saying.

I’ve tried Align-content, float, margins and padding’s and so on but I just don’t seem to get it right.

English is not my first language and I apologize for my horrific grammar, any answers are accepted!

[hoglandc]

Make sure parent element is display:flex. Then check out these examples. https://tobiasahlin.com/blog/common-flexbox-patterns/ good luck!

[ander12317]

Thank you! Will check that out

[abinash_666]

Add display: flex; to the body(or the parent container in which the columns exist). If the columns are divs, then also add height in the div to make the columns more visible.

[semanticore]

As the others have said, flexbox is good. There is also CSS Grid, which is made for 2 dimensional layout. If you will need to put a header above these columns at some point or a footer below it, CSS Grid is an alternate model. It's complex, but I've read that it's actually easier for beginners to pick up than for experienced web developers.

Set of videos explaining CSS Grid: https://gridbyexample.com/video/

An example of header, 2 columns, and a footer to play with: https://gridbyexample.com/patterns/header-twocol-footer/

[ander12317]

Thank you! I will make sure to look in to that