I was cleaning up my code a bit and decided to put my two paragraphs into two columns and float them to the left of my image. In cleaning up my code and trying to put my paragraphs into one div, my paragraphs ended up being underneath my image instead of to the right. Not sure if I did something wrong in my css.
/* body */
body {
margin:114px 0 0 0;
line-height:15px;
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;
}
/* 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: right;
width: 760px;
margin-top:1cm;
}
#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:25px; 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
}
/* 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;
}
/* image */
#image {
width: 400px;
}
img.floatLeft {
float: left;
margin: 4px;
}
/* paragraphs */
#p {
float: left;
margin-right: 4px;
padding-left: 20px;
font-size:12pt;
}
/* Divider */
#div {
float: right;
width: 20px;
margin-right: 1px;
height: 200px;
}
/* Icon */
#icon {
text-align:center;
}
#container {
margin: 20px auto 900px auto;
width: 1000px;
}
aside {
width: 400px;
float: left;
}
section {
margin: 0;
padding: 0 0 20px 0;
overflow: auto;
text-align: left;
}
p {
margin: 0 50px 10px;
text-indent: 20px;
}
<!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>Blank</strong></h1>
</div>
<img src="images/test.jpg" class="floatLeft" width="360px;" height="332px;"/>
<div id=""container">
<aside>
<h2>Header for paragraph 1</h2>
<p>Test
</p>
</aside>
<section>
<h2>Header for paragraph 2</h2>
<p>Test</p>
</section>
</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>