http://www.sidelinesvictoria.com/2_/
For some reason the 3rd column aligns to the right of the bottom of the middle column, where it’s supposed to be at the top of the middle to the right.
any insight would be appreciated.
Hi, I don’t know what the end result is supposed to look like, but you don’t float the middle column and as a result there is no way the rigiht column can float up :).
You can switch around the HTML source order and it will line up
<div id="ctn">
<div id="l">
<div id="l1"> </div>
<div id="l2"> </div>
</div>
<div id="r">
<div id="r1"> </div>
<div id="r2"> </div>
</div>
<div id="m">
<div id="m1"> </div>
<div id="m2"> </div>
</div>
</div>
Place the Middle after the Right, and on “#m” switch that padding to margin.
Thanks for the reply, that fixed up the right column nicely. I attached a pic of what the end result is supposed to look like.
Do you have any other questions? 
We have to wait for the image to be approved so can you upload it to photobucket or tinypic and paste the direct link here/
Another question is how to make the left/right columns shrink to fit an 800x600 / 1024x768 browser window if they’re not using 1280x800. Is it possible without js? Only way I can think of would be to align the left column bgs to the right and the right column bgs to the left, then set a max-width (if you can do that), and give a percentage value to the width maybe?
Here’s a pic of the design:
You could set the parent of the 2 columns to be a min/max width setup and then have the children be percentage widths though that’s a bit harder setup and you would have to cater for IE6 since it doesn’t support min-width (either via expression (JS) or by adding a few extra elements and doing quiz 3’s technique
It’s seeming even more difficult to align the l2/r2 divs to the bottom of the container (ctn). How do you get the l/r divs to stretch the whole height of the container and then have l1/r1 sit at the top and l2,r2 sit at the bottom? height: 100% is the same as height: auto, which is the same as not saying anything about height, correct? lol… and I don’t exactly want the layout to stretch to the size of the whole page either, so I can’t set the containing divs (body & ctn) to 100% height.
Well other then using absolute positioning and top:0;bottom:0; you can set a 100% height, but that assumes that the parent has a height set already.
height:100% means 100% of the parents height. If the height isn’t set then the height:100% (or any percentage height) can’t be used.
height:auto; is the default value.
Does the parent container need to have a set height in px? Or would a % value suffice if body and the container were set to 100%?
As long as the parent has a set height it will be fine
Aka if the structure is as such
<html>
<body>
<container>
<100% high thing></closing divs for everything blah blah>
As long as the container had a percentage height (which it would need also the html/body elements to have a set height) it would work yes
As long as the element has a parent height to work off of it will work. A pixel value will also suffice and it doesn’t need any other parent to have a set height
Sorry about posting before trying, I was at work and couldn’t get a break to try some stuff out. Now I seem to have the height figured out but can’t get the l2/r2 to sit at the bottom of the page.
You could probably give the container position:relative and then absolutely position those divs there (aka top:0;left:0; or bottom:0; or whatever . Wherever it’s supposed to go :))
Also, for the .ctn, give it min-height:100% and not height:100% because as it is now, it won’t expand because the height is set at 100%. min-height:100% will allow it to start at 100% height but it will expand if it has enough cfontent.
Also give IE6 this to be supported
* html .ctn{height:100%;}
IE6 treats height as min-height almost so that will fix IE6 in that respect.
Thanks for all of your help today Ryan!
err you wouldn’t happen to know why the bottom of the page is doing what it’s doing would ya? 
The footer decides to keep going even after the content has ended and it replicates the bg.
Oh oops sorry I looked at what I did and I changed a bunch of the images around without changing the size of the divs so everything was working just as it’s supposed to lol. I guess that’s why my google searches for css bugs went unanswered. :X
Also thanks to oasmat @ http://www.webmasterforums.com/html-css/34097-css-3-column-div-right-div.html#post101868
for making me double check my coding
Is everything working now?
And no problem glad to help
It’s getting close - ran into another snag though, I floated 2 divs for the left nav / right content part and found that if the float stretches past the container, it doesn’t take the container with it so I added overflow: auto; to the container which worked beautifully…
…until I tested in IE8 where overflow: auto; drags the floats down the page quite a ways.
Now I’m searching for IE bug fixes. I was wondering how long it would be until I encountered one of these.
You can show us the page in question-I’d like to see IE8 behaving weirdly with this :).
It might drag the float down because of the scrollbar and it not creating enough room for the floats? Try making it overflow:hidden;
If not then please post a link
Hi, you should get your HTML and CSS validated. IE8 is picky in that regard.
You can’t have IDs or classes start with a number (aka 11/12/13) so make sure the HTML and CSS is valid before you continue any further