Integrating id align class to Div Tag

The <div> tag is a block-level container in HTML used for grouping elements, without inherent meaning or styling. It's versatile for layouts, styling, and JavaScript manipulation, starting on a new line and taking full width by default.
When used with JavaScript this became a powerful tool for creating dynamic content or style in a webpage.

Using div tag we can control a particular area or a block of code and text within it. Here is a simple structure of div tag.
<div id="my_area">
My text here 
You can see we have defined the are within the div tag with id=my_area , this is useful for us to further manage the area using DHTML. We will learn them in our next tutorial. Now we will learn different attributes with examples.

Attributes Align: Values : left, right, center, justify
We can set the align attribute to different values and manage the text within the div tag area.

DEMO of align attribute


We can integrate our existing style sheet and define a class for the div tag. Here is the code to integrate an existing class to the div tag
<div id="my_area"  class="data">
This is a right aligned text2


Now let us try to add one title to this div tag. On mouse over the div area title text will be displayed like alt tag of images. Here is the code
<div id="my_area"  class="data" title="This is a test for title on Div tag">
This is a right aligned text2

To see the example place your mouse over this line


This is document wide identifier for the div. This is highly used in DHTML ( using JavaScript ) to manage content and various display properties of the Div element.
<div id="info_box" >
This is some text


We can assign inline style properties to our DIV box
<div id='my_page2' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #0000cc 2px  dashed; ">
Inline style is used here
In addition to this there are more attributes like onClick, ondblclick, onmouseover, onmouseout, onmousmove, onkeypress, onkeydown, onkeyup.

We will try to learn more on application of div tag in DHTML by placing mouse over it.
How to position a div tag Mouseover of link showing message box


* indicates required
Subscribe to plus2net



    pls give us some more exaples
    Sendyona daniel


    how can i fit well the length of the menu from the extreme end to the extreme end of the compter monitor and to fit on all screens


    provided information is good one and easy to understand

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer