<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Double Think Designs :: Web, Logo, and Graphic Design :: Simple, Effective, Low Cost</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="http://www.doublethinkdesigns.com/includes/orient.css" type="text/css" />
<style>
div#samurai {
width:300px; height:390px;
margin: 0px;
z-index:-1;
position:absolute;
right:0; bottom:0;
background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif);
/*
border: 3px solid black;
padding-top: 150px;
*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="container">
<div id="switcher">
<ul>
<li><a href="switcher.php?set=default.css">Default</a></li>
<li><a href="switcher.php?set=orient.css">Orient</a></li>
<li><a href="switcher.php?set=cityscape.css">Cityscape</a></li>
</ul>
<!--
<p><a href="switcher.php?set=">Previous Style</a>
<a href="switcher.php?set=">Next Style</a>
</p>
-->
</div>
<div id="header">
<h1>Doublethink Designs</h1>
</div>
<!-- END HEADER -->
<div id="navigation">
<ul id="navlist">
<li><a href="http://www.doublethinkdesigns.com/index.php?id=1">Home</a></li>
<li><a href="http://www.doublethinkdesigns.com/index.php?id=2">Services</a></li>
<li><a href="http://www.doublethinkdesigns.com/index.php?id=3">Portfolio</a></li>
<li><a href="http://www.doublethinkdesigns.com/index.php?id=4">About</a></li>
<li><a href="http://www.doublethinkdesigns.com/index.php?id=5">Contact</a></li>
</ul>
</div>
<!-- END NAVIGATION -->
<div id="content">
<p>
At Doublethink Designs we believe that simplicity is key. Through the application of a minimalist philosophy we stress function over form while retaining a classic look that is suitable for any business or personal web experience. Because web standards are becoming more important for the design and presentation of the web, our development focuses on designs that no longer rely on depreciated methods. Simplicity, maintainability, content management, and standards compliance are the cornerstone of our approach to web development.
</p>
<p>
As your experience of the web may have shown you thus far, many sites have not been designed with this approach in mind. There is no shortage of sites where the presentation of the content is done in a forced and unnatural way. The content is overflowing the layout of the site, leading to confusing separations between what is relevant information and what is not. Because of an inability to divorce the presentation from the content, many sites do not effectively deliver information to the viewer.
</p>
<p>
Alternatively our designs allow room for the content to expand without breaking the design and organize the users experience in a logical manner. We understand that many sites have the need to scale in an environment where page hits are high. Utilizing style sheets for all aspects of presentation allow the page sizes to remain small, increasing overall download speeds. More importantly, this approach separates the presentation from the content and allows the administrator a greater degree of control over the content management process. The content is free to grow and expand without affecting the look and feel of the site.
</p>
<p>
Lastly, we feel that an important aspect of web design is the concept of maintainability. Doublethink Designs takes this a step further by giving the client the ability to exercise control over the site content with an administration tool that can be customized according to our client's needs.
</p>
<p>
Overall we believe that if a site is designed correctly, there is not much need to maintain the site, other than delivering new content. With a simple design and the ability to deliver content effectively, we can make your site a success.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<!-- END BODY -->
</div>
<!-- END CONTAINER -->
<div id="samurai"><!-- container for image --><div>
</div>
<!-- END INNER -->
</div>
<!-- END OUTER -->
</body>
</html> Just move the concept into a 'empty DIV' before your closing "inner". I added lorem-ipsum here, -and the image moves down the page nicely. You will want to move my "<style>" addition into your external CSS, and remove the "background-image" referances in whatever DIV that is ("inner"??), -as they are no longer needed. I am using a "z-index:-1" here to make the image be 'underneith' the text. If this fails to work outside of IE, make the "inner" be some higher z-index, and make #saumuari have a "lower" index number... -i think you can figure this out from here. :)