Code.org- flex boxes

Flex Boxes

By Laura FisherJohnson

What is a "div" tag

Div stands for “division” or “section”.

When you are organizing the layout of your webpage, it is often helpful to organize the content into sections.

The div tag definesa division or a section in an HTML document
.
It is often used as a container for HTML elements - which is then styled with CSS.

Multiple Choice

What is a <div> tag used for?

• To divide the page into sections

• To style the page

• You must have this tag for content to show up

• These tags are just to make the page look fancy

​What does <div> do?

• The div tag does not really do anything visible; it just divides the document into sections, so it is convenient for you to work with a document by splitting it into different sections.

• The div tag is easily styled by using the class or id attribute.

• Any sort of content can be put inside the div tag!

  Note: By default, the div element is a block element, meaning that it takes all available width, and comes with line breaks before and after the div element.

Multiple Choice

If you use <div> without CSS what will you notice about the page?

• You will notice that bordered sections show up

• It really makes the text on the page pop

• Nothing

• The page will look sparkly

Multiple Choice

What sort of content can be put in the <div> tag?

• Anything in paragraph format

• Images only

• Tables

• Literally anything!

<div class="London">

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>London has over 13 million inhabitants.</p>

</div>

<div class="Oslo">

<h2>Oslo</h2>

<p>Oslo is the capital city of Norway.</p>

<p>Oslo has over 600.000 inhabitants.</p>

</div>

https://levelbuilder-studio.code.org/courses/csd-2022/guides/div 2/3

<div class="Rome">

<h2>Rome</h2>

<p>Rome is the capital city of Italy.</p>

<p>Rome has almost 3 million inhabitants.</p>

</div>

Example of Using Dividers

Result after CSS

There are different methods for aligning elements side by side, all include some CSS styling. The example above was styled using

the float: left and width: 33% CSS properties.

Result after CSS and using<div>