Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > HTML > tags > div

div element

Browser support:
Defines a block of HTML content.
The div (division) tag is one of the most useful HTML elements. With this tag you can create a generic block-level element as a container of other elements. It is useful to create a well designed HTML page.
If you want to see the HTML tags by categories, please visit this page.
This element requires a closing tag.
JavaScript page for this element: div.

Possible members:

 Attributes
Events
Styles
Pseudos
accessKey
Sets an access key to an element.
align
Sets the horizontal alignment of the contents in an object.
class
Sets the style class or classes that belong to the element.
contentEditable
3
 Sets whether the contents of the object are editable.
dataFld
Specifies which field of a given data source should be bound to the specified object.
dataFormatAs
Specifies how data is to be rendered.
dataSrc
Sets the identifier of the data source that is bound to the element.
dir
Sets the text direction as related to the lang attribute.
DISABLED
Sets the state of an object for user interaction.
draggable
3.55
 Sets whether an element is draggable.
HIDEFOCUS
Specifies whether a dotted rectangle (focus rectangle) is drawn around an object while it has focus.
id
Sets a unique identifier for the object.
lang
Specifies the language of the element.
language
Sets the scripting language for the current element. Use it only for the script element.
name
Sets the name of an element.
NOWRAP
Specifies whether the text in a table cell can be wrapped.
spellcheck
Sets whether the automatic spellchecker is enabled.
style
Sets an inline style associated with an element.
tabIndex
Specifies the tabbing order for keyboard navigation using the TAB key.
title
Specifies a tooltip for an element.
unSelectable
Sets whether the selection process can start in an element's content.
xml:lang
Sets the language code of the XML document.

Example HTML code 1:

This example illustrates the use of the div element:
 
<div style="background-color: green">
    A block of document content.
</div>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example creates a scrollable area with a div element and the overflow style property:
 
<head>
    <style>
        .example {
            overflow: auto;
            background-color: #F9F9F9;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="example">
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
        The overflow property determines what to do with content outside the element's rendering area.<br />
    </div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the position style property for division elements:
 
<head>
    <style>
        .lefttop {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 30px;
            height: 30px;
            background-color: red;
        }
        .rightbottom {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 30px;
            height: 30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="lefttop"></div>
    <div class="rightbottom"></div>

    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
    Try to scroll and resize the window!<br /><br /><br /><br /><br />
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

External links:

div element (MSDN)
div element (Safari Reference Library)
div element (W3C)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix