Nesting and Floating Elements
advertisement
Nesting and Floating
Elements
Nesting <div> elements:
Remember, we referred earlier to the
<div> element as a "box" or "container"
element.
Many XHTML elements can be placed in a
container, including other containers.
This is known as "nesting" elements and is
fairly common when building websites.
A nested <div> example:
<head>
<style type="text/css">
.yellow {
width:400px;
height:400px;
background-color:yellow;
}
.blue {
width:200px;
height:200px;
background-color:blue;
}
.pink {
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<div class="yellow">
<div class="blue">
<div class="pink"></div>
</div> <!-- blue -->
</div> <!-- yellow -->
Here we have placed a container (pink)
inside another container (blue), which
itself is inside a parent container (yellow).
Notice the comments added to the last
two closing </div> tags. These can help
us later, especially when there is a lot of
code between the opening and closing
tags.
Floating elements:
So far, we have been building our pages vertically.
Once we placed an element (such as a paragraph,
image, or div) on a page, the next element automatically
appeared below it on the page.
To better use the real estate on a web page, we need a
way to arrange elements horizontally on the page also.
This is accomplished via the "float" property in CSS.
Floating <div> elements:
<head>
<style type="text/css">
.first {
width:100px;
height:100px;
background-color:blue;
float:left;
}
.second {
width:100px;
height:100px;
background-color:yellow;
float:left;
}
</style>
</head>
<div
<div
More
More
More
More
More
class="first"></div>
class="second"></div>
content.<br />
content.<br />
content.<br />
content.<br />
content.<br />
More
More
More
More
content.
content.
content.
content.
More content.
When we float elements,
subsequent content stays at the
same horizontal level and uses
whatever space remains. Once
that space is used up, the content
will "wrap" to the beginning of the
next line.
Floating right and left:
<head>
<style type="text/css">
.first {
width:100px;
height:100px;
background-color:blue;
float:left;
}
.second {
width:100px;
height:100px;
background-color:yellow;
float:right;
}
</style>
</head>
<div
<div
More
More
More
More
More
class="first"></div>
class="second"></div>
content.<br />
content.<br />
content.<br />
content.<br />
content.<br />
More
More
More
More
More content.
content.
content.
content.
content.
We can also float elements to both
the right and left sides of the page.
The subsequent content will still
behave the same way, filling
whatever space remains untaken
by the floated elements.
This is commonly done to create a
web page with three columns. A
navigation bar will be floated left,
an information bar floated right, and
the main content will reside in the
middle of the page.
Clearing the float:
<head>
<style type="text/css">
.first {
width:100px;
height:100px;
background-color:blue;
float:left;
}
.second {
width:100px;
height:100px;
background-color:yellow;
float:right;
}
.clearfloat {
clear:both;
}
</style>
</head>
<div class="first"></div>
<div class="second"></div>
<div class="clearfloat"></div>
More content.<br />
. . .
More
More
More
More
More
content.
content.
content.
content.
content.
If we want to force the next element
to start below the floated elements,
we can clear the float.
