Why won't this silly column behave?

HTML & CSS
1

I recently redid my website, and got rid of the old, css-heavy, div-heavy 3-column layout in favor of a nice, simple, 2-column fluid. Not wanting to be bothered with which column was longest, or any of that nonsense, I just absolutely positioned both columns respective to the sides of the screen, and left nice margins for everything to fit. Then I set that pesky footer to be fixed (and tiny) at the bottom of the screen, so it would alway be visible. Everything went great, and there was almost no fiddling, and it looked fine in all the browsers I checked it in.

Then I got stupid. For my background image, I’m using a Gimped-up copy of a pic I took while on vacation this summer. It’s basically just a tree line with a gradient sky, BUT (here comes the stupidity) I decided it would be really cool if I repeated the image at the bottom, flipped over, with a wave effect added, to make it look like a reflection of the top image.

To make this work, I wrapped the two columns with a wrapper (to use to hold the bottom background image) and float the columns and clear the footers, and all that. I’ve done this a hundred times, but THIS time, the goofy right column won’t go next to the left one, and I can’t figure out why. I need another set of eyes (or maybe many sets) to figure out what’s going on.

The page in question is here

The CSS is here

If anyone can figure out what I’ve done wrong to push the right column down, OR if there’s a better way to do a second background image, I’m all ears. Or maybe eyes.

2

Hmmm, that massive right margin was to make room for the right column. Also, I didn’t set a width on Content because I wanted it to grow with different screen sizes.

EDIT: Ok, so I moved the right column to be first in the source, then kept the margins like before, BUT now on pages where the right column is longer, the footer runs over it.

Going to try the width method you mentioned first.

3

Eek! Well unfortunately I’ve now got everything working, LOL! Going with the percentage widths did the trick! (you’re a genius). I even got the reflection at the bottom to show up the way I imagined it. :smiley:

I probably fat-fingered something to cause the aforementioned problem. I’m famous for omitting semicolons when I’m agonizing over why something isn’t working (and it’s usually a missing semicolin, lol).

So far I’ve tested in:

Windows:
IE7
FF 3.6x
Google Chrome

Linux:
FF 3.6x
Opera 10
Chromium

And not too much “div-itis” :slight_smile:

4

That will only work if the element itself is not floated because then the margin slides under the right float until it reaches the containing block (the viewport edge in this case). Once you float the content then the large margin just pushes everything else away and there can never be anything alongside.

Also, I didn’t set a width on Content because I wanted it to grow with different screen sizes.

Yes then it needs to be non floated as mentioned before.

EDIT: Ok, so I moved the right column to be first in the source, then kept the margins like before, BUT now on pages where the right column is longer, the footer runs over it.

It shouldn’t do that if the footer has been cleared. You’ll have to tell me on which page this happens and in what browser.

5

Aha! Got it!

I abandoned those silly em widths and went with percentages. Now everything fits and it resized great.

Now to figure out why my bottom background image has vanished!! :mad:

6

You haven’t set a width on your floated Content column although you have set massive right margin effectively stopping anything from being next to it.


#content {
float:left;
[B]margin:0 0 1em 5em;[/B]
padding:1em;
[B]width:/* add suitable width here*/[/B];


}

You will also need to set a min-width on html,body equal to both the columns total width to stop the right column dropping down at small screen sizes.

If you wanted a fluid width left column then you would need to unflfoat Content and float the right column first in source and then use margins of the content column (much as you had before).