😃

This is a header

It's only a header because I decided that's what it should be. The header tag doesn't actually "do" anything. It's just a semantic element to help you organize your page. I've added some classes to the header tag on this page: w3-container and a color so you can see how the element stretches the entire width of the page.

LOOK! The image disappears and this text appears when the screen is small?! Maybe it's the w3-hide- class?...

Organizing elements on your pages

A common problem with web design is managing the "real estate" and keeping independent elements, independent. Having items touch that aren't supposed to touch or having everything become jumbled-up when you resize can make a web developer's job very frustrating!

Right-click on this page and select 'View page source' to see how I got all of the elements to play nice with each other & to resize properly...

Below, are a couple w3-card elements. Notice how they don't touch, even when you resize?! The key to keeping elements separated is to put them inside div elements that have padding to separate them from other elements. The w3-container class adds left & right padding while the w3-padding class adds top & bottom padding.

This isn't the only way to keep elements from touching. You can add whatever styling you'd like to separate items. Just remember that elements can have their own styling and you can nest elements to achieve a lot of really cool effects!

I'm a card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis eos inventore illum ab ex vitae quam, fugit consectetur odio repellat cumque, ea magnam temporibus ullam. Velit laboriosam, sequi numquam molestiae officiis totam at ipsa facere sunt earum officia maiores cupiditate.

I'm the bottom of the card

I'm also a card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci veniam eveniet ducimus illum, sequi nisi labore debitis nostrum recusandae eum ipsam obcaecati mollitia quo eos.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quibusdam vel, earum voluptate beatae dolor tempore sint quia illum officia totam placeat assumenda nostrum asperiores ipsa exercitationem rem fuga sit!

A bunch of nested div elements:

within a div
within a div
within a div
within a div
within a div
within a div
div

Note: Each div in this example has the w3-padding class.


Without the text (and a border, some margins and more padding):

Each div in this example has these classes:
  • w3-container
  • w3-padding-16
  • w3-margin
  • w3-border

Play around with removing those classes and see what happens??

(also, this is going to look bad at the small screen size. But who would nest this many div elements in a real page, anyway?!