Image floating
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Free CSS Template provided by http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
img {
padding : 3px;
border : 1px solid #bcd2e6;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 2px;
margin-top : 5px;
margin-left : 5px;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
color: #333;
width: 595px;
float: right;
height: 190px;
background: #fff url(37 free css template-images/hbg.jpg);
margin-bottom: 5px;
margin-top: 5px;
}
#header h1 {
font-size: 2.1em;
font-weight: lighter;
letter-spacing: -1px;
padding-left: 5px;
}
#header h2 {
float: right;
margin-top: 130px;
font-size: 1.6em;
font-weight: lighter;
letter-spacing: -1px;
padding-right: 10px;
}
#header a {
color: #333;
}
#leftcolumn {
color: #333;
height: 555px;
width: 195px;
float: left;
margin-bottom: 5px;
margin-top: 5px;
}
#leftcolumn h2 {
background-image: url(37 free css template-images/lctbg.jpg);
background-repeat: no-repeat;
margin-left: 4px;
margin-top: 3px;
padding-left: 5px;
padding-top: 2px;
padding-bottom:4px;
font-size: 1.4em;
font-weight: lighter;
letter-spacing: -1px;
}
.leftnav {
clear: both;
text-align: left;
color: #7D8085;
padding: 15px 0em 0px 0px;
margin-left: 5px;
margin-right: 5px;
}
.leftnav li {
font-weight: normal;
margin: 0 0 8px 0;
padding: 0em 0em 0em 10px;
border-bottom: 1px solid #ccc;
list-style-type: none;
}
.leftnav li a {
color: #546078;
text-decoration: none;
}
.leftnav li a:hover {
color: #F29900;
text-decoration: none;
}
.news {
padding: 8px;
margin-top: 5px;
}
.news h3{
font-size: 1em;
padding-top: 3px;
}
.news p {
font-size: .9em;
line-height: 1em;
}
.news a {
color: #F29900;
float: right;
margin-top: -5px;
padding-right: 3px;}
.nnews {
background-image: url(37 free css template-images/newsbg.jpg);
background-repeat: repeat-x;
margin-top: 7px;
padding-left: 3px;
padding-bottom: 21px;
}
.ltext {
margin-top: 8px;}
.ltext p {
text-align: justify;
}
#rightcolumn {
float: right;
color: #333;
height: 360px;
width: 595px;
display: inline;
margin-bottom: 5px;
}
#rightcolumn h1 {
font-size: 1.5em;
font-weight: lighter;
letter-spacing: -1px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
background-image: url(37 free css template-images/mth1bg.jpg);
background-repeat: no-repeat;
}
#box {
margin-top : 19px;
margin-bottom : 10px;
}
#box a {
color: #F29900;}
.content_right {
margin : 0 auto;
display : inline;
float : right;
width : 275px;
background-image: url(37 free css template-images/bbg.jpg);
background-repeat: no-repeat;
margin-right : 0px;
padding : 5px;
text-align : justify;
}
.content_left {
margin : 0 auto;
display : inline;
float : left;
width : 275px;
margin-left : 0px;
padding : 5px;
text-align : justify;
background-image: url(37 free css template-images/bbg.jpg);
background-repeat: no-repeat;}
.content_left h3 {
padding-left : 5px;
font-size : 1em;
margin-bottom : 5px;
}
.content_right h3 {
font-size : 1em;
margin-bottom : 5px;
margin-top : 5px;
}
.righttext p{
text-align: justify;
}
.righttext {
margin-top: 8px;
}
#rightcolumn h2 {
font-size: 1.5em;
font-weight: lighter;
letter-spacing: -1px;
padding-left: 5px;
margin-top: 195px;
padding-bottom: 3px;
background-image: url(37 free css template-images/mth1bg.jpg);
background-repeat: no-repeat;
}
#footer {
width: 798px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #ccccff;
text-align: center;
font-size: .8em;
}
#footer p{
padding-bottom: 5px;}
#footer a {
color: #F29900;}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<h1>Free CSS Template</h1>
<h2>Provided by : <a href="http://www.getcsstemplates.com">CSS Templates 4 Free</a></h2>
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<h2>lorem ipsum</h2>
<div class="leftnav">
<ul>
<li><a href="http://www.getcsstemplates.com">Website Templates</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
</ul>
</div>
<h2>news & events</h2>
<div class="news">
<div class="nnews">
<h3>Apr.23.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
</div>
<div class="nnews">
<h3>Apr.21.07.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
</div>
</div>
<div class="ltext">
<h2>lorem ipsum</h2>
<img src="37 free css template-images/img1.jpg" class="floatTL" alt="img 1" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<h1>Lorem Ipsum Dolor Sit</h1>
<div id="box">
<div class="content_left">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<a href="#">read more</a>
</div>
<div class="content_right">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<a href="#">read more</a>
</div>
</div>
<div class="righttext">
<h2>Lorem Ipsum Dolor Sit</h2>
<img src="37 free css template-images/img2.jpg" class="floatTL" alt="img 1" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam </p>
</div>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer"><p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> <br /> Copyright © 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS WEB DESIGN AND TEMPLATES</a> </p>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category