What is a div in CSS?

Intro

If you're here on Neocities and learning how to make webpages you've likely encountered something called a div and you see that they are used a lot. But what exactly is a div and how do you use one?

You don't need divs to make a webpage, but they do open up creative layouts. Before divs, people used tables to format webpages, using the cells to create columns and even position fancy borders. You can still do this, but I find divs to be much neater and easier

A div is basically a box. Its like other elements where you start with <div> and end with </div>. Unlike other elements it doesn't come with much preformating (ex. lists have numbers/bullets and are indented, links are underlined and blue). This is because divs are meant to contain other elements and be styled by the webmaster using CSS. Divs are pretty much pointless if there is nothing inside of them

You can use divs to emphasize certain peices of text/images like this one!

This div is styled to have a border, purple background, padding, and rounded borders

You can even put divs inside of divs!

.note {
  background: mediumorchid;
  border: 2px solid purple;
  border-radius: 15px;
  color: lavenderblush;
  padding: 10px 20px;}

Here is the CSS used to style the above divs. This goes into the <style> element in the <head> element

<html>
  <head>
    <style>
      .note {
        background: mediumorchid;
        border: 2px solid purple;
        border-radius: 15px;
        color: lavenderblush;
        padding: 10px 20px;}
    </style>
  </head>
  <body>
    <p>text and things go in the body</p>
    <div class="note">the div styled with .note</div>
  </body>
</html>

you can style all divs using div {} or you can make a class for specific divs - if you want ones with different styles on the same page. .note {} is the class I made and named for my above divs. To give your div the class in the HTML body, use <div class="note"> as the starting tag (the end tag will be normal; you can also make any name for the class - as long as it is defined in the CSS)

As you experiement, I recommend giving divs a border or background color so you can see them, even if later on you make them invisible

Width

By default divs will span the whole width of the element it is inside (the body in the above example), but you can adjust the width!

I made this div 60% the width of the body width: 60%;

I used percentages, but other units of length can also be used

inline-block makes the div only as wide as its contents

display: inline-block;

by default divs are display: block;
(all block elements are 100% width by default)

This also means that if they are small enough,
two inline-block divs will sit next to each other
rather than starting on a new line.
default (block) divs start on a new line regardless

Position

Automatically, elements are left aligned, but not much is needed to center or right align them

Center

You can center divs by setting the margin to auto margin: auto; but they must have a set width since they are 100% by default.

You can customize the vertical margins while keeping it horizontally centered, ex: margin: 10px auto; will center the element while give upper and lower margins of 10px.

note that this only works for block elements (p, div, table, etc), not inline elements (a, img, b, etc), nor elements styled with inline-block

Suppose you'd like the width of a block element to auto adjust to the width

Inline does this, but inline elements can't be centered with margin: auto;

You can use width: fit-content; with margin: auto on block elements!

Right

You can right align divs by setting the float property to right. float: right;

this works for all kinds of elements, including block, inline, and inline-block (though it will only be noticable for block elements if they have a width less than 100%)

Any content listed after right floating element will sit to the left of it. That may be intentional, but if you want it to start on a new line you will have to style the next element with clear: both;

Since you only need to apply clear to one element, you can put it in that elments HTML tag using style="clear: both;" (rather than putting in the CSS to affect every instance of that element, or making a class for it).

<p style="clear: both;">the next paragraphs HTML tags</p>

In the HTML document, this paragraph is after the div to the right, but instead of coming after it, this paragraph sits next to the floated div!

I used clear: both; on this paragraph so it would start below the floating div. The same principles would apply to a div if it came after a floating div. If using clear on the next element is not working, try adding it to a break element <br style="clear: both;"> after the floating div, and then put the next element you want

Side Bars and Columns

Sidebars

you can use float float: left; along with a small width to create a sidebar!

sidebars are nice if you have a main article or content, but would like to put a table of contents or links on the side

Single Sidebar

The main content would be here, it sits to the right of a div that floats left

Check out the div example to the left to see how to make a sidebar

Double Sidebars

left sidebar

right sidebar

Here is an example with a right and left sidebar!

Note that in the HTML the main content can either sit between the sidebar divs or after both of them, just not before

Columns

First Column

Creating columns is very similar to sidebars, except you have them side by side!

I use float: left; for all column divs simply because english text flows left to right, and that is the order left floating divs will take (right floating divs will list the first div to the very right, creating a right to left flow)

Second Column

Set a width for them according to however many columns you want (ex: 50% for two columns, 33% for three columns, 25% for four columns, ect)

You may have to troubleshoot a little to make them all fit, either by reducing percentage, accounting for margins, and/or setting box-sizing: border-box;

This makes sure the border width is included in the width of the column, rather than adding to the width

Third Column

You could also make the widths of the columns different (as long as they don't surpass 100%)

You can make sidebars and main content this way, putting the main content into the wider column

Neat Columns

You may have noticed that the above set of columns are not the same height. You could set the height in CSS, but it will not automatically adjust to the longest columns length

Here is where we utilize putting divs inside of another div

These columns are contained by a div styled with display: flex; and thats all thats needed!

I styled the flex div with the same class (.note) as my other example divs so that you can visualize it, but you can leave it styled with only display: flex; and it will do its job while being invisible!

This outer div is the flex div! Its styled with display: flex; (note that I added flex-wrap: wrap; to the flex div so that this paragraph would sit under the columns, otherwise it would be squished next to the columns)

Theres a lot more you can do inside a div styled with display: flex; (called flexbox if you want to dig deeper) but this is as far as I go considering I don't know as much about flexbox and this is a div tutorial, not a flexbox tutorial ^^

Have fun, experiment!