CSS: First table-less site

CorumMc · 10-05-2007, 06:32 AM

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>

<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>

Costin Trifan · 10-05-2007, 06:51 AM

Is this what you want?

Edit: I mean, this is the way you want it to look like?

CorumMc · 10-05-2007, 07:19 AM

No, unfortunately as I was able to do that.

The layout design has the callout more of a corner element. Same width as column 2 but placed in the bottom left corner.

Here's a shot of one of the comps.

Thanks

CorumMc · 10-05-2007, 11:51 AM

Sorry; Right corner...

Dyslexia strikes again

Don't see an option to edit. Is there a time limit for it in the forum?

Costin Trifan · 10-05-2007, 01:52 PM

well, I don't get it... maybe I'm missing something here, but I doubt that...

because your preview shows exactly the way you wanted your page to look like...

I added the previews from IE and Firefox. As you can see, they're the same...

**btw, the time limit to edit your posts is 30 minutes

CorumMc · 10-08-2007, 06:24 AM

Quote:

Originally Posted by Costin Trifan

well, I don't get it... maybe I'm missing something here, but I doubt that...

because your preview shows exactly the way you wanted your page to look like...

I added the previews from IE and Firefox. As you can see, they're the same...

**btw, the time limit to edit your posts is 30 minutes

Based on you're post I tried the code from home in IE7 and it worked there for me just as it does in FireFox. But it still displays incorrectly (in the screnshot) in several IE6's here.
Thanks for the responses.

Costin Trifan · 10-08-2007, 07:16 AM

The footer looks bigger in the IE6 screenshot. Have you been modifying its height?