|
Inactive
Join Date: 10-05-07
Posts: 4
Latest Blog:
None
|
CSS: First table-less site
I'm donating my time to a local civic organization and am using the opportunity to finally try to wean myself off of table based layouts. I'm having an issue with positioning the last element on the page and would really appreciatte any help at all.
It is a basic site plan that I'm saving out as a Dreamweaver template; Head w/ nav, 1 column body, Foot. The home page is a little different with 2 columns in the body and a callout in the bottom right corner that overlays the foot and 2nd column.
I've tried placing the 2 columns and callout inside a body div, or keeping them seperate with the head and foot, and also placing the callout within the foot itself, all with little success. Below is essentially how I have it laid out so far. It seems to work in Firefox but not in IE.
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--link href="positions.css" rel="stylesheet" type="text/css" /-->
<style type="text/css">
#body {
background-color: #CCCCCC;
width: 800px;
}
#head {
background-color: #33FFFF;
height: 50px;
width: 800px;
}
#content {
background-color: #CCFF99;
width: 800px;
position: relative;
}
#foot {
clear:both;
background-color: #CCCC66;
height: 50px;
width: 800px;
}
#left {
background-color: #9999FF;
width: 500px;
float:left
}
#right {
background-color: #FFFFCC;
width: 300px;
top: 0px;
right: 0px;
float:right
}
#corner {
background-color: #FF6666;
width:300px;
height: 150px;
top: -120px;
right: 0px;
position:relative;
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="head">HEAD</div>
<div id="content">
<div id="left">
Aenean pulvinar malesuada odio. Ut sodales. Nulla lacus eros, convallis eu, laoreet eu, porttitor nec, lorem. Etiam risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget nunc nec quam tincidunt gravida. Phasellus accumsan. Curabitur non ipsum. Aenean rhoncus ultricies libero. Proin viverra ante a lacus. Duis a odio. Nulla tortor. In faucibus convallis elit. Proin vel nulla. Vivamus id augue eget ante auctor pellentesque. Vestibulum orci enim, pharetra at, porta ac, volutpat dignissim, erat. Nulla facilisi. Quisque enim. Vestibulum fermentum condimentum ipsum. Aenean non risus at sapien luctus scelerisque. In hac habitasse platea dictumst. Phasellus a lectus a orci varius suscipit. Sed quis sapien non erat egestas accumsan. Aenean lacinia metus ut orci. Etiam interdum, pede non rhoncus viverra, dui nibh sollicitudin quam, a auctor dui est eu nulla. <br /><br />
Aenean pulvinar malesuada odio. Ut sodales. Nulla lacus eros, convallis eu, laoreet eu, porttitor nec, lorem. Etiam risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget nunc nec quam tincidunt gravida. Phasellus accumsan. Curabitur non ipsum. Aenean rhoncus ultricies libero. Proin viverra ante a lacus. Duis a odio. Nulla tortor. In faucibus convallis elit. Proin vel nulla. Vivamus id augue eget ante auctor pellentesque. Vestibulum orci enim, pharetra at, porta ac, volutpat dignissim, erat. Nulla facilisi. Quisque enim. Vestibulum fermentum condimentum ipsum. Aenean non risus at sapien luctus scelerisque. In hac habitasse platea dictumst. Phasellus a lectus a orci varius suscipit. Sed quis sapien non erat egestas accumsan. Aenean lacinia metus ut orci. Etiam interdum, pede non rhoncus viverra, dui nibh sollicitudin quam, a auctor dui est eu nulla. <br /><br />
t tortor non magna. Phasellus viverra convallis est. Vivamus eget felis. Vestibulum viverra placerat augue. In tempor aliquam metus. Proin condimentum semper elit. chris</div>
<div id="right">Sed suscipit. Pellentesque ultricies, nibh nec eleifend viverra, augue odio eleifend urna, ut malesuada leo nunc et enim. Pellentesque lorem. Duis pretium nisl et mauris. Cras feugiat nunc id lorem. Maecenas in lectus ut lectus interdum elementum.
<br /><br />
Nam quis leo blandit justo pharetra porta. Aenean consequat posuere sem. Donec euismod, lorem a condimentum viverra, felis felis tempor sapien, ut mollis metus magna et urna. Donec nulla. Donec mauris tortor, sodales a, dapibus nec, blandit id, elit. Nulla vitae libero. Suspendisse sed justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque velit eros, vehicula convallis, commodo vitae, interdum eu, orci. Nunc vitae nibh. Quisque eu felis a lacus suscipit tempor. Nunc lacinia fermentum dui. Aenean blandit tortor non magna. Phasellus viverra convallis est. Vivamus eget felis. Vestibulum viverra placerat augue. In tempor aliquam metus. Proin condimentum semper elit. <br /><br />
<br /><br /><br /><br /></div>
</div>
<div id="foot">FOOT<div id="corner">Callout Spotlight </div></div></div>
</body>
</html>
|
|