HTML
HTML Head
HTML Forms
HTML Graphics
HTML Media
HTML APIs
HTML Div Element
To define a section in an HTML document, <div> tag is used. We use it to group large segments of HTML elements and format them with cascading style sheets. The </div> tag indicates the end of the section.
Attributes
Some significant characteristics of the < div > tag are as follows:
Align: It specifies the alignment of the div. The possible values are center, right, and left. The default value is left.
Style: It includes an inline cascading style sheet.
In the above example, the text is in red and centered horizontally.
Uses
We use div elements to structure different sections of a webpage, such as headers, content areas, sidebars, and footers.
Let’s see some examples for styling the div elements using CSS.
Flex
The flex property in CSS transforms a container element into a flexible box layout. It allows the arrangement and distribution of its child elements horizontally or vertically.
The above example shows a flex container outer-div that evenly spaces three inner-div elements, each occupying 32% of the width and having a blue background.
Grid
In CSS, the grid allows to define the rows and columns, creating a structured layout for organizing elements precisely within the container.
The above code creates a webpage with a grid layout. The outer div contains four inner div elements arranged in two columns with a 20px gap. Each inner div has a yellow background.
Watch Video on YouTube
HTML Div Element
