I need a little help cleaning up my code a bit. I think I may have used too many divs in trying to get my image to float left and my paragraphs to float right. Also, how can I use margin-top or margin-bottom instead of
tags?
<!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="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
<img src="images/twitter.png" height="49px;"/>
</div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div id="text">
<h1><strong>Welcome</strong></h1>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div style="float: left;">
<img src="images/test.jpg" width="304px;" height="285px;"/></div>
<div style="float: right; width: 220px; margin-right: 5px;">
<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 style="float: right; width: 20px; margin-right: 6px;">
<img src="images/div103.gif" height="200px;"/></div>
<div style="float: right; width: 220px; margin-right:5px;">
<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>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</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;
margin-bottom:62px;
}
#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;
}
/* Main */
#main {
background: url(images/body_all_bckg.jpg) repeat-y top center;
}
#content {
width:780px;
margin:0 auto;
}
/ * Text */
#text {
float: left;
width: 780px;
overflow:hidden;
}
#text p {
margin:7px 0 7px 0;
}
#text li {
background:url(images/li.gif) no-repeat 0px 7px;
}
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;
}
