These were all around before phones. They were 960px wide and they fit on all the available monitors. If the monitor was really big, that was fine – because there could just be white on both sides of the website and it would still look good.

At this stage, you’ll need a lot of practice: but, you have all of the tools to build a column. You set a width or a max-width and you trick it to be center by telling it to have auto margins on both sides.

You have the same set of tools that the early webmasters had! Make a column… put some stuff in it… send it up on the FTP wormhole.

Surely, uncle bill is going to want some weird marble texture or a giant picture of a cat in the background. All the cool sites have layouts that appear to be much wider than 960px.

How can you have one bag be inside of another bag – but then also have that bag inside the bag be around the outer bag….  hmmm….

Well, that doesn’t make any sense – but also you can’t do that.

You could (and should) draw it out on paper. However, first – look at this code.

(we’ll skip the details like doctype and head and metadata to keep things very simple)

You know about these elements, right?

The ‘tags’ describe the start and end of a piece of content. Those are the facts.

But the browser displays them as “boxes” or rectangles.

So, – how about you get out a code editor – and follow along. Start with this figure – and put some borders on the elements with CSS. (we’re not going to show the CSS to keep it focused on the markup)

They are little nested Russian dolls.

So far – you’ve only seen a few rudimentary ways to align things.

This is an example of using max-width and margin to trick the body element to center. You should have done this many many times by now. So, go ahead and give it a shot.

Not all elements are the same – but as far as html, body, div, section, – and all those block-level elements for organization / they are just boxes. just grouping mechanisms.

So, if you can align the body inside of the html – then you can align any element in another element.

It’s a box – inside of a box.

(You’re following along and writing this code, right?)

Since there are boxes in boxes in boxes, and boxes – next to other boxes, it’s important to recognize the direct relationship between a “parent” element – and its direct “child” element.

(in theory – there are grand-children and great-grand-children… but that’s just going to make things confusing)

Since your website is made up of many “sections” – well, the section element is probably a good one to work with. Its whole purpose is to help group content into sections.

and then – a div is a “Generic division of content.” You can think about it as an element that’s for grounding things — but for purely visual layout purposes. So, that’s a good one to use for this inner column idea. It’s a purely visual decision.

This is different then text-align; center;

You aren’t just centering text, you are centering the div. You’re centering the box that holds the content. So, go ahead and use that same trick you used on the body element.

This isn’t a time to try and memorize a rule like “all sections have divs with the class inner-column and .…”

This is a convention that we’ll be using in the course, but these HTML elements and their CSS properties can be used in any way you can think of.

We’ll be showing you what has worked best for us.

This setup seems to do the trick in 95% of the scenarios, so – that’s why we’re learning it so early / before any of the CSS positioning and layout type things.

No. Some people will think that this “extra” div is a problem. Those people seem to have more than 1 problem. So, don’t listen to them.

There will be lots and lots of elements on the page. Lots of content / and lots of ways to group and position that content.

People seem to really like Stripe’s website (2021).

It has a bit of a “messy desk” feel, but underneath – it’s still a column.

These page sections are also useful because you can give them IDs and link to those.

For example:

perpetual.education#learning-path

CSS/linear-gradient()#examples

This is really helpful for technical support people. They can give specific links to people and get them right to where they want to be.