While I was designing my index page, I noticed that I've used too many divs. I went ahead and made a few things as classes, but I still feel like I am using too many divs. Any suggestions or ways that I use less divs?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep the link to the author
intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<!-- header -->
<div id="header">
<div id="logo"><a href="#">Header</a></div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Link1</a></li>
<li><a href="kidsnsports.html">Link2</a></li>
<li><a href="africa.html">Link3</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="guestbook.php">Guestbook</a></li>
</ul>
<div><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>
</div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div id="text">
<h1><strong>Welcome</strong></h1>
<div id="image">
<img src="images/panda.jpg" style="width: 360px;"/></div>
<div id="p">
<div style="float: left; width: 180px;">
<h2>Header</h2>
<p>
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
</p>
</div>
<div id="div" style="float: left;">
<img src="images/div103.gif" /></div>
<div style="float: left; width: 190px;">
<h2>Header</h2>
<p>
This is our left text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
This is our right text column.
</p>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2011<strong> Author </strong></div>
<div id="right_footer">
<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality
Software</a>
</div>
</div>
<!-- end footer -->
</div>
<!-- end main -->
</body>
</html>
/* body */
body {
margin:114px 0 0 0;
line-height:16px;
font-family: Tahoma, Arial;
background: url(images/body_top_bckg.jpg) no-repeat center top #171c20;
color:#bed7e6;
font-size:11px;
}
a {
color:#018BC1;
}
a:hover {
text-decoration:none;
}
#header {}
#logo {
padding:30px 0 120px 0;
color:#fff;
text-align:center;
}
/* logo */
#logo a{
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
}
/* Menu */
#menu {
color:#fff;
text-align:center;
}
#menu ul {
text-align:center;
list-style:none;
padding:0;
}
#menu ul li {
display:inline
}
#menu ul a {
font-weight:bold;
font-size:14px;
text-decoration:none;
color:#fff;
background-color:#445d6c;
padding:0 10px 2px 10px;
}
#menu ul a:hover
{
background-color:#f26513;
}
.icon {
text-align:center;
}
/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width: 780px;
margin:0 auto;
overflow:hidden;
margin-bottom:3cm;
}
/ * Text */
#text {
float: left;
width: 780px;
}
#text p {
margin:7px 0 7px 0;
}
#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}
.image {
float: left;
margin-top:1cm;
padding-right:18cm;
}
.p {
float: right;
margin-right: 4px;
margin-top:1cm;
padding-left:5cm;
}
.div {
float: right;
width: 20px;
margin-right: 1px;
height: 200px;
}
h1 {
margin:30px 0 0 0;
padding:5px 0 7px 45px;
text-transform:uppercase;
font-size:24px; color:#fff;
background:url(images/h1_bckg.jpg) no-repeat;
float:left;
}
/* Footer */
#footer {
background:url(images/footer_bckg.jpg) no-repeat top center;
height:102px; clear:both;
width:780px;
margin:0 auto;
}
#left_footer {
float:left;
padding:60px 0 0 30px;
color:#fff; font-size:12px;
}
#left_footer a {
color:#fff;
}
#left_footer a:hover {
text-decoration:none;
}
#right_footer {
float:right;
padding:60px 30px 0 0;
color:#fff;
font-size:12px; text-align:right;
}
#right_footer a {
color:#fff;
}
#right_footer a:hover {
text-decoration:none;
}
#content .inner_copy {
border:0;color:#f00;
float:left;
width:50%!important;
margin:-202px 0 0 0;
overflow:hidden;
line-height:0;
padding:0;
font-size:12px
}
/* Floats */
#leftFloat
{
float: left;
width: 100px;
}
#rightFloat
{
float: right;
width: 100px;
}
/* gallery */
.row img {
margin: 2px;
border: 1px solid #0000ff;
clear: both;
width: 100px;
height: 90px;
margin-left:3px;
}
.first
{
float: right;
text-align: center;
}
.last {
border: 1px solid #ffffff;
float: right;
}
.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 10px;
}