Center me, too!

Welcome to the layout lab. This page contains the instructions for different layout strategies in this page. There are a couple of different options in CSS layout, but you'll learn that some are easier and more reponsive than others!

Wrap the <h1> and <h2> at the beginning of the page in a header, and center them with the text-align property.

Below this text is the column container area. It should be 70% wide, and centered in the page. Wrap the two columns together into one element (<div> is appropriate to use here because there is no clear semantic meaning to the grouping of the two columns), and make that container a flex container by setting it's display property to flex.

Right column

This column is on the right of the main content area. It takes up 2/3 of the main content area width. Accomplish this by setting its flex-basis value to 67%.

Float the above image to the right, so that it's to the right of this text instead of above it. Set its width to 200px so that it isn't so huge. The height will adjust to keep the scale of the image.

For this paragraph, we don't want the text to wrap around the floating image anymore. Use clear: both to cause this paragraph to move down below the floating image. Give it an id or a class so that you can select this paragraph specifically in your CSS.

Both columns should have 2em of padding, 2em of margin, and a 4px dashed red border. Give both columns a class that they can share so that you don't have to duplicate this box model CSS.

Finally, use position: fixed to set the position of this paragraph element so that is is 5px away from the bottom of the browser view port. Depending on how big your browser screen is, other text from the page might overlap with it. That proves to be a big challenge with fixed position elements.