Normal Flow of <div> Tags

 

<div> tags stack on the bottom of each other as default. So basically if you insert two <div> tags one after another, the second one will automatically go to the next line under the first <div> tag.

 

Example 1: Stacking <div> tags

 

<html>
<head><style type="text/css">

#box1 {
width: 200px;
height: 50px;
background-color: #ccffcc;
}

#box2 {
width: 200px;
height: 50px;
background-color: #ccff00;
}

</style>

</head>


<body>
<div id="box1">
Box1.
</div>

<div id="box2">
Box2.
</div>
</body>

</html>

 

Result:

 

Box 1
Box 2

 

 

Floating <div> Tags

 

In CSS you can float an element meaning push it to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with <div> tags layout web pages.

 

When you float an element to the left or right, it will be pushed to the side of whatever element it is contained within. Floated <div> tags remove themselves from normal document flow and position themselves to touch the edge of the containing block, therefore any element that comes after them, moves up to occupy the space. Therefore, if you wish to have both elements side by side, you need to float both of them.

 

Example 2: Floating two DIVs to the left

 

<html>
<head><style type="text/css">

#box1 {
width: 200px;
height: 50px;
background-color: #ccffcc;
float: left;
}

#box2 {
width: 200px;
height: 50px;
background-color: #ccff00;
float: left;
}

</style>

</head>


<body>
<div id="box1">
Box1.
</div>

<div id="box2">
Box2.
</div>
</body>

</html>

 

Result:

 

Box 1
Box 2

 

 

 

 

Floating Images

 

flower

You can wrap text around an image by floating the image to the right or left. In this example the image of the flower has been floated to the left, so as you can see the text comes up and wraps around the image. If the image wasn’t floated, the text would appear in as a paragraph under the image.

 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

 

<<    Previous Page                                                                    Next Page    >>