SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Why won't this silly column behave?

    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.
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #content {
    float:left;
    margin:0 0 1em 5em;
    padding:1em;
    width:/* add suitable width here*/;
    
    
    }
    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).

  3. #3
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.
    <cfset myblog = "http://cydewaze.org/">

  4. #4
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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!!
    <cfset myblog = "http://cydewaze.org/">

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cydewaze View Post
    Hmmm, that massive right margin was to make room for the right column.
    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.

  6. #6
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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.

    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"
    <cfset myblog = "http://cydewaze.org/">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •