The content in my #rightside container is being pushed down the screen and doesn't start until the #leftside container ends. I know I can do it but using negative margins but is there a better way?
LINK: http://mikegreenia.biz/dotbiz/
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mikegreenia.biz</title>
<link rel="stylesheet" type="text/css" href="dotbiz-styles.css" />
</head>
<body>
<div id="topline"></div>
<div id="container">
<a href="index.html"><img src="dotbiz-banner.gif" alt="mikegreenia.biz" /></a>
<br /><br />
<div class="box">
<div class="top"></div>
<h2>I'm a <a href="web.html">website designer</a>,
sports <a href="sports.html">fanatic</a>,
and a <a href="blogger.html">blogger</a> in my free time. I am Mike Greenia.</h2>
<div class="bottom"></div>
</div>
<br />
<div class="contbox">
<div class="top"></div>
<div id="leftside">
<h1>h1 header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sollicitudin elit placerat enim scelerisque sagittis. In
luctus luctus velit. Praesent vulputate posuere mi. Nam elementum purus vitae est. Donec imperdiet, augue vitae aliquet
scelerisque, nulla mauris tempus magna, eu consectetuer elit libero ac ante. Integer dictum pede gravida purus. Proin massa
ipsum, vulputate in, vehicula id, consequat eget, lorem. Aenean vitae tellus. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Suspendisse dui. Vivamus id velit.</p>
</div>
<div id="rightside">
<img src="http://www.315webdesign.com/img/mikegreenia.jpg" alt="My Blog" />
</div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
body {
background-color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
}
img {
border: none;
}
a {
border: none;
}
h1 {
color: #CCCC33;
}
h2 {
color:#FFFFFF;
text-align:center;
}
h2 a {
text-decoration:underline;
color:#FFFFFF;
}
h2 a:hover {
text-decoration:none;
color: #33CCCC;
}
p {
padding:3px;
}
#topline {
padding: 0;
margin: 0;
border-top: 12px solid #33CCCC;
width:100%;
}
#container {
margin: 70px auto;
width:650px;
height:400px;
}
.box {
width: 590px;
padding: 0 20px;
background-image: url(mid.gif);
}
.box .top {
height: 16px;
font-size: 1px;
margin: 0 -20px;
background-image: url(top.gif);
}
.box .bottom {
height: 15px;
font-size: 1px;
margin: 0 -20px;
background-image: url(bottom.gif);
}
.contbox {
width: 590px;
padding: 0 20px;
background-image: url(mid.gif);
}
.contbox .top {
height: 16px;
font-size: 1px;
margin: 0 -20px;
background-image: url(top.gif);
}
.contbox .bottom {
height: 15px;
font-size: 1px;
margin: 0 -20px;
background-image: url(bottom.gif);
clear:both;
}
#leftside {
width: 300px;
}
#rightside {
float:right;
}
