What is a div in CSS?

theme dark light

home

Intro

If you're just learning how to make webpages with HTML and CSS 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 its outdated and no longer necessary.

A div is basically a box. It's 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, background, and padding.

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 some CSS similar to that used to style the above divs. This goes into the <style> element, which is in the <head> element. "Note" is just a name I made up, the period before the name indicates to the CSS that it is a class. Classes are helpful when you want to style multiple divs with different styles. Make a class with any name for each style!

<html>

  <head>
    <style>
      .note {
        background: darkblue;
        border: 1px solid orange;
        padding: 15px;}
    </style>
  </head>

  <body>
    <p>text and things go in the body</p>
    <div class="note">the div styled with .note</div>
  </body>

</html>

In order for the class style to affect your div (or other element), use <div class="note"> as the starting tag (the end tag will be normal) in the body of the HTML. The name of the class doesn't have to be "note", it can be anything you want, and you can have as many as you'd like!

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%; Other units of length can also be used (ex. px, em, vw, etc).

.note {
    width: 60%;}

inline-block makes the div only as wide as its contents (or any width you define). By default divs are display: block;

Block elements are 100% width by default. (This inline-block has a 300px width)

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, even if they have a narrow width. (This inline-block has a 300px width)

No width set.

Position

Automatically, elements are left aligned (or according to the reading direction of the language), 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.

.note {
    width: 60%;
    margin: auto;}

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 want the width of a block element to be centered but also auto adjust to the content width.

Inline-block adjusts width to the content, but can't be centered with margin: auto;

Instead, you can use width: fit-content; with margin: auto on block elements!

.note  {
    widths: fit-content;
    margin: 10px auto;}

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 the 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! It's 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)

<head>
    <style>
      .note {
        width: 33.3%
        float: left;}
      .flex {
        display: flex;
        flex-wrap: wrap;}
    </style>
</head>

<body>
<div class="flex">containing flex div
    <div class="note">column 1</div>
    <div class="note">column 2</div>
    <div class="note">column 3</div>
</body>

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 just a div tutorial, not a flexbox tutorial ^^

Have fun, experiment!