Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: #336699;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin: 0;
}
img.right {
margin: 0 0 10px 10px;
padding: 5px;
background: #ece9d8;
border: 2px solid #666;
float: right;
clear: right;
}
.textbox {
padding: 15px;
font-size: 0.8em;
float: left;
}
.clear {
clear: both;
}
#wrapper {
background: #fff;
margin: 0 25px;
}
/* \*/
* html #wrapper{
height: 1%;
}
/* */
#header {
background: #6f9ece;
height: 100px;
}
#left {
background: #a9c6e2;
float: left;
width: 150px;
}
#right {
background: #cfdfef;
float: right;
width: 150px;
}
#middle {
margin: 0 150px;
}
#middle .textbox {
background: #e9f0f8 url(bgmiddle.gif) no-repeat 0 0;
}
#footer {
background: #F7F7F7;
padding: 10px;
clear: both;
height: 1%;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> </div>
<div id="left">
<div class="textbox">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis ligula lorem, consequat
eget, tristique nec, auctor quis, purus.Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Duis ligula lorem, consequat eget,
tristique nec, auctor quis, purus</p>
</div>
</div>
<div id="right">
<div class="textbox">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Duis ligula lorem, consequat
eget, tristique nec, auctor quis, purus.
Vivamus ut sem. Fusce aliquam nunc vitae
purus. Aenean viverra malesuada libero.
Fusce ac quam. Donec neque. Nunc venenatis
enim nec quam. Cras faucibus, justo vel
accumsan aliquam, tellus dui fringilla
quam, in condimentum augue lorem non tellus.
Pellentesque id arcu non sem placerat iaculis.
Donec neque. Nunc venenatis enim nec quam.
Cras faucibus, justo vel accumsan aliquam,
tellus dui fringilla quam, in condimentum
augue lorem non tellus. Pellentesque id
arcu non sem placerat iaculis. Donec neque.
Nunc venenatis enim nec quam. Cras faucibus,
justo vel accumsan aliquam, tellus dui
fringilla quam, in condimentum augue lorem
non tellus. Pellentesque id arcu non sem
placerat iaculis.</p>
</div>
</div>
<div id="middle">
<div class="textbox">
<img src="" alt="" width="150" height="150" class="right" />
<img src="" alt="" width="150" height="150" class="right" />
<img src="" alt="" width="150" height="150" class="right" />
<h1>Lorem ipsum</h1>
<p>dolor sit amet, consectetuer adipiscing
elit. Duis ligula lorem, consequat eget,
tristique nec, auctor quis, purus. Vivamus
ut sem. Fusce aliquam nunc vitae purus.
Aenean viverra malesuada libero. Fusce
ac quam.</p>
<h2>Lorem ipsum</h2>
<ul>
<li>dolor sit amet</li>
<li>consectetuer adipiscing elit</li>
<li>Duis ligula lorem</li>
<li>consequat eget</li>
<li>tristique nec</li>
<li>auctor quis</li>
<li>purus. Vivamus ut sem</li>
<li>Fusce aliquam nunc vitae purus</li>
<li> Aenean viverra malesuada libero</li>
<li>Fusce ac quam.</li>
</ul>
<div class="clear"> </div>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>Any ideas?
cross-browser and 1.1 strict, I admire that!
I opened it up in 6.06, 7.54, and Betas 1,2 and 3 of Opera 8. They ALL did something different and I don't think thats what you want!
I've played around with it a bit but I don't have the time right now... here is what I've done with my site's layout...
I wanted a table with a 100% width with an 8px right and a 110px left margin. Can't do 100% - 118 though. So I created an invisable table with three cells, set the table to 100%, left cell to the width I wanted to clear my content tables so the menus could be over the blank area...and the same with the right cell.
I haven't converted to all DIV layouts yet though. Best of luck! There are others much more suited then me when it comes to DIVs!
