Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
The Column Layout Challenge1:04 with Guil Hernandez
You've learned a lot about layout and the differences between block, inline, and inline-block display. Now it's time to lay out a section of the page on your own, using CSS display settings.
- Target the two columns inside the main container to display two equal-width columns.
- Display both columns horizontally so that they appear side by side on the same line.
- You're building the column layout using a mobile first approach, so the layout styles should apply to large screens only.
Now that you know more about the differences between block,
inline and inline block display,
it's time to lay out a section of the page on your own using CSS display settings.
You can access the files for
this challenge by launching the workspace on this page.
Just like the navigation items in the previous lesson,
we can lay out content columns using the display property.
So for this challenge you'll need to target the two columns
inside the container div to display two equal width columns.
So give each column a fluid width
that takes up half the space inside the container.
Then display both columns horizontally so
that they appear side by side on the same line, like this.
Remember that you're building this layout using a mobile first approach.
So these layout styles should apply to large screens only.
This layout challenge is a good way to practice what you've learned so far.
In the next video I'll show you the method I used.
You need to sign up for Treehouse in order to download course files.Sign up