HTML div element and CSS

Simple examples how to style div element

7 min readJul 22, 2023

The div tag, that is known as division tag, is used to make division of content in the web page, where it is a block level tag, a generic container tag, and used to group various tags of HTML in a section, so that styles can be applied to the section (Rawat, 2023). It would be better to group similar content into a div tag, that means the content will have the same style to apply to (Chris, 2021). Suppose there are more than one div element to have the same styles, then instead of type the styles over and over, classes can be created to use the styles in many HTML document sections and also files (Glass, 2020). Solution to syle an element is not unique, for example there are several ways to center text in div with CSS (Juviler, 2023). Here some simple examples how to style div element are given.

Figure 0. The use of CSS for some div elements.

Default convention

Here, there are some default coding conventions to reduce diplayed line of codes, since some lines can be reused (Qadir, 2021), hierarchy of HTML elements across examples stay the same (Lee, 2007), or some values are set constant (Zastrow, 2020), but not the initial one (Shechter, 2020).

The outmost div element attached to body element is named “page”.
There is further advanced use of div, e.g hide and show it using JS (Arora, 2023), but not covered in here.
Background color of the “page” is lightgrey.
The idea is inspired by default background color of Java applet (Saryada, 2023), but does not use the color.
To style an element a class is created.
It would be flexible to assign style rules to a designated HTML element rather than all instances of the element (Glass, 2020).
Value of box-sizing attribute is set to border-box.
This approach will assure that that additional border or padding width of child container do not goes outside of parent container (Chakrabarti, 2019), so that the borders drawn while designing do not change the layout, especially related to float attribute.

Figure 1. Default base appearance of outmost div named “page”.

All lines of code is as follow

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Default</title>

<style>
.page {
  box-sizing: border-box;
  background: lightgrey;
  height: calc(100vh - 16px);
}
</style>

  </head>
  <body>
<div class="page">
Hello, World!
</div>
  </body>
</html>

but what will be displayed, for the sake of copy-and-paste easiness, are only

.page {
  box-sizing: border-box;
  background: lightgrey;
  height: calc(100vh - 16px);
}

and

Hello, World!

unless stated otherwise. You can see how many lines are reduced from the whole complete lines to the two code snippets.

Position and width

In CSS there is position attribute that can have relative, absolute, and static as value, where static is the default value (Z, 2017). Here the results of those values are given as follow.

Figure 2. Value of div attribute position is static (red), relative (green), and absolute (blue).

Result in Figure 2 is obtained using

.def-pos {
  box-sizing: inherit;
  width: 50vw;
  border: 1px solid #f00;
  background: #fcc;
  padding: 10px;
}

.rel-pos {
  box-sizing: inherit;
  width: 50vw;
  border: 1px solid #0f0;
  background: #cfc;
  padding: 10px;
  position: relative;
  left: 25%;
  top: 25%;
}

.abs-pos {
  box-sizing: inherit;
  width: 50vw;
  border: 1px solid #00f;
  background: #ccf;
  padding: 10px;
  opacity: 0.8;
  position: absolute;
  left: 25%;
  top: 25%;
}

as the style and using

<div class="def-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="rel-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="abs-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

as HTML elements.

Notice that first div (red, class="def-pos") with static position is put on the top right corner since it is the first element of its parent. The second div (green, class="rel-pos") with relative position is put relativel to its original position, which is direct after the first div. And the last or the third div (blue, class="abs-pos") with absolute position is put absolute to its parent left top corner.

Width of the divs is also changed from their default value, which is the same as their parent. There is also additional padding to make the text in div not to near the border.

Font, background, and border colors

When only colors are change without changing width and position attributes, the divs will be vertically stacked.

Figure 3. Default div elements with changes only in their colors (font, background, border).

Result in Figure 3 is obtained using

.red-pos {
  border: 1px solid #f00;
  background: #fcc;
  color: #800;
}

.green-pos {
  border: 1px solid #0f0;
  background: #cfc;
  color: #080;
}

.blue-pos {
  border: 1px solid #00f;
  background: #ccf;
  color: #008;
}

as the style and

<div class="red-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="green-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="blue-pos">
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

as HTML elements, where the differences with previous section are the classes that are used.

Notice that previous example in Figure 2 has nicer look compare to example in Figure 3, since the previous example uses padding to make distance between div border and its content.

Four sections: Intro and three columns

Suppose that you want to make a layout with four sections, one at the top with full width and below it there are three columns with the same width.

Figure 4. A four sections layout with one intro sections and three columns below it.

Result in Figure 4 is obtained using

.intro-post {
  box-sizing: inherit;
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px;
}

.left-post {
  width: 33%;
  box-sizing: inherit;
  display: inline-block;
  background: #fcc;
  padding: 10px;
}

.center-post {
  width: 33%;
  box-sizing: inherit;
  display: inline-block;
  background: #cfc;
  padding: 10px;
  margin: -1px;
}

.right-post {
  width: 33%;
  box-sizing: inherit;
  display: inline-block;
  background: #ccf;
  padding: 10px;
  margin: -1px;
}

as the style, where there is a trick used in above result, which is negative margin (Coyier, 2016). And following code is

<div class="intro-post">
<h1>Introduction</h1>
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="left-post">
<h3>Left column</h3>
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="center-post">
<h3>Center column</h3>
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

<div class="right-post">
<h3>Right column</h3>
These are just some words to fill a div element,
so that its layout becomes real and not abstract anymore.
</div>

as the HTML elements.

Border radius

Any element can have rounder corner using border-radius attribute with appearance of color change it the element has a background-color or border that is differenct than the element it is above (Cope, 2022).

Figure 5 can be obtaind using

.intro-post {
  box-sizing: inherit;
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px;
  margin: -1px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 40px;
}

as the style.

Further exploration about border radius can be conducted, e.g. try different example possibilities (Prykhodko, 2022), create ellipse or circle (Fitzgerald, 2022), or use classes dedicated to it in a framework (Ibaba, 2022).

Text alignment

The attribute text-align can have value of left, center, right, or justify. It is simply as follow

.left-text {
  text-align: left;
}

.right-text {
  text-align: right;
}

.center-text {
  text-align: center;
}

.justify-text {
  text-align: justify;
}

The example will be integrated in the next section.

Wrap all up

Using previous attributes of a div element the final result will be as follow.

Figure 6. Final appearance of 4-sections web page.

Notice that intro section has center text alignment, left section has left text alignment, right section has right text alignment, and center section has justify text alignment. Background color of div with class page is also set to white.

Hopefully, what are given here can be useful for the reader. You can further study about the attributes through the given references. Well, that’s all.