Java Training School

HTML Div Element

The <div> tag is just like a container unit which is used to encapsulate other page elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once.

The <div> element is takes all available width, and comes with line breaks before and after.

The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements at once.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<div style="border:2px solid green;padding:20px;font-size:20px"> 
<h2> div container......</h2>
<p>Welcome to javatraining school, Here you get most valuable content.</p>  
<!-- table inside div element-->
<table style="border:2px solid black">
 <tr>
    <td>Java</td>
    <td>HTML</td>
    <td>Python</td>
  </tr>
  <tr>
    <td>Spring boot</td>
    <td>Web design</td>
    <td>AI/ML</td>
  </tr>
</table>
</div>
</body>
</html>

Output:

Aligning <div> elements side by side

You can use CSS property to customize your div. Here I am taking multipe <div> and applying CSS to make it side by side.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
<style>
.mycontainer {
  width:80%;
  overflow:auto;
  margin:auto;
}
.mycontainer div {
  width:33%;
  float:left;
}
</style>
</head>
<body>
<div class="mycontainer">

  <div style="background-color:#FFA4A3;">
    <h2>Div 1</h2>
    <p>HTML Essentials: Your Gateway to Web Mastery</p>
    <p>Allow syntax highlighting for custom tags in HTML.</p>
  </div>
  
  <div style="background-color:#ADC0C7;">
    <h2>Div 2</h2>
    <p>Eix multi-edit resists escape after typing issue.</p>
    <p>Enhance GUI: make sizing arrows more coherent in Find dialog.</p>
  </div>
  
  <div style="background-color:#A9EEE1;">
    <h2>Div 3</h2>
    <p>Update to scintilla 5.5.0 & Lexilla 5.3.2.</p>
    <p>Fix user defined auto-insert not working issue.</p>
  </div>

</div>
</div>
</body>
</html>

Output:

The CSS float property was not originally meant to align <div> elements side-by-side, but has been used for this purpose for many years.

The CSS float property is used for positioning and formatting content and allow elements float next to each other instead of on top of each other.

<—Previous
Next—>