Right now, my image and paragraphs are where they need, but I am trying to use <img class="floatLeft" /> instead of what I have now. When I use <img class="floatLeft" /> my image doesnt float left.
<!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</title>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>
<!-- header -->
<div id="header">
<div id="logo"><a href="index.html">Header</a></div>
<ul id="menu">
<ul>
<li><a href="index.html">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.php">Contact</a></li>
<li><a href="guestbook.php">Guestbook</a></li>
</ul>
<div id="icon"><a href="twitter.com/">
<img border="0" src="images/twitter.png" alt="twitter" width="58px;" height="53px;" />
</a></div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div id="text">
<h1><strong>Welcome</strong></h1>
</div>
<div id="image">
<img src="images/test.jpg" style="float:left; width: 365px;"/>
</div>
<div id="p">
<div style="float: left; width: 180px;">
<h2>Header</h2>
<p>Paragraph
</p>
</p>
</div>
<div id="div" style="float: left;">
<img src="images/div103.gif" /></div>
<div style="float: left; width: 190px;">
<h2>Headerh2>
<p>
Paragraph
</p>
</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: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: left;
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
}
/* 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;
}
/* image */
#image {
margin-top:1cm;
width: 400px;
margin-top:2cm;
}
/* 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;
}
Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
1
Back to top
