I thought I had a firm grasp of CSS :(

[Khemikal]

Here is the deal, I am officially at wits end. I have a site where the height of all the pages changes dependent upon the content. I have two divs, a left column and then the main section. My problem is I am trying to float a div to the bottom of the left side of the page. I've tried background-position, I've tried an image on the page, I've spent about 5 hours now trying to get the thing to work like I want and I'm just not seeing it. I'm hoping another brain will see what my eyes are missing at the moment. Here is the CSS:

/* Body Yay */
body {height: 100%; width: 770px; margin: 0 auto; padding: 0; background: #d23417; color: #ffffff; font: normal 90% arial, helvetica, sans-serif; text-align: center;}
a:link {color: #3366cc; background-color: transparent; text-decoration: none;}
a:visited {color: #6c7380; background-color: transparent; text-decoration: none;}
a:hover {color: #204080; background-color: transparent; text-decoration: underline;}
/* Container */
#all {position: relative; width: 770px; height: auto; margin: 0; padding: 0; background: transparent; color: #ffffff; text-align: center;}
#header {float: left; width: 750px; height: 111px; margin: 0; padding: 0; background: #ffcc00; border-left: 10px solid #ffffff; border-right: 10px solid #ffffff; text-align: left;}
/* Background color for entire page */
#leftcolumn {float: left; width: 750px; height: auto; margin: 0; padding: 0 0 auto 0; background: #cbced5; background-image:url("Images/Page/buildingbg.jpg"); background-repeat: no-repeat; background-position: left bottom; color: #ffffff; border-left: 10px solid #ffffff; border-right: 10px solid #ffffff; border-bottom: 15px solid #ffffff; text-align: center;}
* html #leftcolumn
{
width: 770px;
w\idth: 750px;
margin: -3px 0 0 0;
}
/* Image that should appear at bottom left of page */
#leftcolumn2 {float: left; width: 151px; height: 100%; margin: 0; padding: 0; background: #dddddd; background-image:url("Images/Page/leftbackground.jpg"); background-repeat: repeat-y; color: #000000; text-align: left;}
/* menu on left hand side of page */
#menu {float: left; clear: left; width: 151px; height: 100%; margin: 0; padding: 0; background: #dddddd;
background-image:url("Images/Page/menuborder.jpg"); background-repeat: repeat-y; background-position: right; color: #000000; text-align: left;}
#menuitem1 {width: 151px; height: 23px; margin: 0; padding: 0; background: #dddddd; background-image:url("Images/Page/linkboxtop.jpg"); background-repeat: no-repeat; background-position: center 0; color: #000000;}
#menuitem2 {width: 135px; height: 100%; margin: 0 auto 0 auto; padding: 0; background: #ffffff; font: normal 90% arial, sans-serif; z-index: 100; text-align: center;}
#menuitem2 a {display: block; background: #ffffff; color: #000000; margin: 0 auto; padding: 0px; font: bold 80% sans-serif; text-decoration: none; text-align: center;}
#menuitem2 a:hover {background: #dddddd; color: #4204fd;}
#menuitem2 a span {display: none;}
#menuitem2 a:hover span {display: block; position: absolute; top: 250px; left: 18px; width: 135px; margin: 0px; padding: 0px; z-index: 100; background: transparent; color: #000000; font: normal 120% Verdana, sans-serif; text-align: center;}
#menuitem3 {width: 151px; height: 23px; margin: 0; padding: 0; background: #dddddd; color: #000000; background-image:url("Images/Page/linkboxbottom.jpg"); background-repeat: no-repeat; background-position: center 0;}
/* Main content */
#content {float: right; width: 537px; height: 100%; margin: 20px 18px 20px 25px; padding: 0; background: #ffffff; background-image:url("Images/Page/contentborder.jpg"); background-repeat: no-repeat; background-position: right; color: #000000; text-align: left;}
#contenttop {width: 537px; height: 20px; margin: 0; padding: 0; background: #ffffff; background-image:url("Images/Page/contenttop.jpg"); background-repeat: no-repeat;}
#contentbottom {width: 537px; height: 20px; margin: 0; padding: 0; background: #ffffff; background-image:url("Images/Page/contentbottom.jpg"); background-repeat: no-repeat;}
/* Secondary Content */
#content2 {width: 510px; height: 100%; margin: 0; padding: 0 0 0 15px; background: #ffffff; color: #000000; text-align: left;}
#content2 li {list-style-type: none;}
/* Tertiary Content /*
#content3 {float: right; width: 520px; height: 100%; margin: 20px 24px 20px 0; padding: 0; background: #cbced5; color: #000000; text-align: left;}

XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html; charset='UTF-8'" />
<title>Kinetic Builders Construction Grimaldi Office Complex</title>
<link rel="stylesheet" href="stylekb1.css" type="text/css"></link>
</head>
<body>
<div id="all">
<div id="header">
<img src="Images/Page/tb1a.jpg" alt="Kinetic Builders Header"></img>
</div>
<div id="leftcolumn">
<div id="menu">
<div id="menuitem1">
</div>
<div id="menuitem2">
<a href="aboutkineticbuilders.html">COMPANY PROFILE<span>Our company history and philosophy</span></a>
<a href="meetkineticbuilders.html">EXPERIENCE<span>Meet the men and women who power our company</span></a>
<a href="commercialkineticbuilders.html">COMMERCIAL<span>Information and examples about commercial projects completed by Kinetic Builders</span></a>
<a href="residentialkineticbuilders.html">RESIDENTIAL<span>Information and examples about residential projects completed by Kinetic Builders</span></a>
<a href="http://www.butlerbuilder.com">BUTLER BUILDERS<span><img src="Images/Page/butlerbuilderlogo.jpg" alt="Butler Builder Logo"></img></span></a>
<a href="contactkineticbuilders.html">CONTACT US<span>Should you have questions or would like more information</span></a>
<a href="index.html">HOME<span>Return to our main page</span></a>
</div>
<div id="menuitem3">
</div>
</div>
<div id="content">
<div id="contenttop">
</div>
<div id="content2">
Name: Grimaldi Office Building<br /><br />
Location: Miramar Beach, FL<br /><br />
Size of Project: 10,000 SF<br /><br />
Architect: Kendrick David Dowling Architects<br /><br />
Duration: December 2000<br /><br />
Scope: The staff was responsible for the complete construction of a two story, 10,000SF masontry office building. The complete project consisted of the building, the build-out of eight separate office spaces with electrical and mechanical, an elevator, two common bathroom areas, common corridors, and a concrete parking lot with landscaping. Lightgage metal framing and drywall was used at the interior walls with wood roof trusses concrete tile roofing.
</div>
<div id="contentbottom">
</div>
</div>
<div id="content3">
<span class="picture1"><img src="Images/Commercial/Grimaldi/grimaldi1.jpg"></img></span>
<span class="picture2"><img src="Images/Commercial/Grimaldi/grimaldi2.jpg"></img></span>
<span class="picture1"><img src="Images/Commercial/Grimaldi/grimaldi3.jpg"></img></span>
<span class="picture2"><img src="Images/Commercial/Grimaldi/grimaldi4.jpg"></img></span>
</div>
<div id="leftcolumn2">
</div>
</div>
</div>
<div id="sitemenu">
<a href="aboutkineticbuilders.html">ABOUT KINETIC</a> ¦ <a href="meetkineticbuilders.html">MEET KINETIC</a> ¦ <a href="commercialkineticbuilders.html">COMMERCIAL</a> ¦ <a href="residentialkineticbuilders.html">RESIDENTIAL</a> ¦ <a href="contactkineticbuilders.html">CONTACT</a> ¦ <a href="index.html">HOME</a>
</div>
</body>
</html>

Ummm I hope this is enough...I'm truly befuddled and that hasn't happened in quite some time (at least with CSS).

Thank you for any help.

Khem

[dcrombie]

This might be helpful:

9.6.1 Fixed positioning [w3.org]

(or not ;))

[SuzyUK]

Hi Khemikal - Welcome to CSS on WebmasterWorld [webmasterworld.com]

I'm not too sure what your problem is ~ can you try to narrow it down a bit?

an intial copy/paste showed this to be an error but it may just be a typo

/* Tertiary Content /*
#content3 {float: right; width: 520px; height: 100%; margin: 20px 24px 20px 0; padding: 0; background: #cbced5; color: #000000; text-align: left;}

the comment is incorrect and is actually commenting out the CSS below it?

Let us know or give a simplified version thanks

Suzy

[iamlost]

Several things:
First: It is good practice to strip out personal/company identifiers prior to posting code.

Second: Your code misses CSS validation:

#leftcolumn {padding: 0 0 [b]auto[/b] 0; }

There is no "auto" attribute for padding.

Third: Your code misses xhtml validation: in <div id="sitemenu"> use ascii code in place of "¦" if you want to use as written.

Fourth: Your code is NOT cross browser compatible. Your divs break up in several that I tested.

Fifth: Your actual question (I had to wade thru the above so passed it on :-( ):
height: auto; seems to be a problem. When I set an actual height value the image displayed in the proper position - even on the browsers displaying "broken divs".

Hope something is useful out of the preceeding.

[Khemikal]

First of all I would like to thank those who attempted to help with the issue. I'm active on another forum or two and this was my first experience with this forum. The experience was very positive and I'm quite pleased with the responses. I look forward to becoming an active member of this community.

The good news is I solved the issue, the bad news is despite everyone's best intentions, it came to me this afternoon after a nap, not from one of the above posts. Just so you can rest peacefully at night, before I present a site as live, every page must validate to the w3c standards as well as the CSS. Futhermore they are always compatible across the 3 major (IMHO) browsers IE, Nutscrape/Mozilla, and Opera. Although I try for backwards compatibility I admit it isn't that big of a deal to me and personally believe it is up to designers to give the big middle finger to past incarnations of browsers and move on dragging the rest of the world kicking and screaming with us.

Although that might not be the most popular opinion that is also why I employ browser detection on our servers so when some chump with an old browser hits a site, they are encouraged to "update".

Thank you again everyone for your help and I look forward to being a member of the community in the coming future.

Sincerely,

Khem

[g1smd]

A typo:

w\idth: 750px;

Run the pages through the HTML and CSS validators to catch any others.

[Khemikal]

Actually that is not a typo. That is what is known as the "star selector" hack. Personally I find it a much better solution than tanteks box model hack. It also will not have any adverse side effects once IE gets its crap together and displays the box model correctly as is done in Mozilla and Opera among others.

Khem

[TheDoctor]

"star selector" hack? More information please ;-)

[Khemikal]

Here you go, enjoy!

[info.com.ph...]

Khem

[SuzyUK]

thanks for that Khemical

I had a look around that before having come across it on the rounds of Box Model hacks.

As most around here know, I "don't do" hacks, instead preferring the M$ Conditional Comments.. however the "star selector hack" definitely seems to be the more friendly of the lot..

I think - just for fun - I'm gonna see if it can be incorporated into my experimental 3 column layout [webmasterworld.com] as it seems easier to incorporate and it covers IE5/Mac too... hmmm

(I know I said I wasn't gonna do any more work on it... but it's a woman's prerogative....)

Now wheres my handy IE5/Mac tester gone ;)

Suzy

[Khemikal]

The best thing to me about this Suzy is that you can change a great many things besides width, margins, padding. For instance, as I know you are aware, Opera and Mozilla tend to display fonts at a different size than IE. Using this "hack", you can make fonts render at a smaller size in Mozilla/Opera thereby standardizing your look across browsers.

Khem

[DrDoc]

I still prefer using Conditional Comments. That way you keep the tweaks separate from the rest of your styles.

[TheDoctor]

Thanks for the link, Khem. I've printed a copy and will peruse as soon as I get a second.

[off on a tangent]
Anyone got a link for Conditional Comments? I keep having problems because I don't properly get them right.
[/off on a tangent]

[DrDoc]

Conditional Comments [msdn.microsoft.com]

[Khemikal]

This has become a very interesting thread. I haven't had any experience with the conditional comments. I look forward to reading up on them this evening. Thanks.

Khem

[DrDoc]

What I like about conditional comments is that you can use them for more than just style sheets. They can be used for anything :)

[SuzyUK]

Agreed about conditional comments.. that's why I've tended to favour them, I see them as being the longer term fix or (as I've said before)
IE's Get Out Clause.. I don't think there is much point in "wishing" IE would get it right ;) (though I would obviously love it if they did!) but at least they provide us with a method to "workaround".

I still don't understand them fully yet but the scope is wide!

for instance you could feed a whole different experience to IE if you really wanted to!

OT::
>>font sizes
are not a problem with me.. I often wonder why designers go to such lengths to provide seperate stylesheets just so they can "visually" say they are "being good!"... AFAIK my sites provide that without the need for extra buttons/icons

but I'm willing to live and learn, or is this a case of standards overstepping?

Suzy

[TheDoctor]

Thanks for the link DrDoc

[tompage]

On suggestions in this forum, I tried Conditional Comments instead of another hack to fix a problem with IE/Win's interpretation of "width" only to find that it didn't work. I am going to experiment a little more to check that I definitely haven't just failed to implement them properly and will start a new topic on the issue if I think it is definitely not working.