SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get 2 columns working

    I've got Dan Shafer's and Rachel Andrew's books and I've got 2 columns to work for me before, but I'm tearing my hair out this time and I haven't much left anyway. I have:

    #main {
    float: left;
    margin-right: 210px;
    padding: 0 10px;
    }

    #sidebar {
    float: right;
    width: 190px;
    background-color: #ddd;
    color: black;
    padding: 0 10px;
    }

    And the (non)working page is at http://www.compassion-in-business.co.uk/about.php

    I guess I'm missing something obvious, but what? Please?

  2. #2
    SitePoint Evangelist LemoNade's Avatar
    Join Date
    Aug 2005
    Location
    Southampton, UK
    Posts
    500
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the sidebar, change the float property to either left or inherit.

    -Will
    My portfolio: lemonadeX.net
    XHTML/CSS/PHP coder for hire

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LemonAde,

    I don't think thats it, that just floats the nav below the table (why?)

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, 'inherit' moves the sidebar to the left with the main div on top, and 'left' moves it to the left but below the main div...

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here's a 2 column example that may be of help. It's the opposite way around from what you need (sidebar col is on the left) but shouldn't take you 2 minutes to switch across.

    http://www.chriswilliamsdesign.com/hessodreamy/

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Why do you have that wide right margin with a left float? Depending on the width of your main, you are using "x" px for the main, plus 210 px for the margin, and 20 px total (right and left) for padding. So, in essence you have 230 empty pix of space before your next division.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by whintersby
    Here's a 2 column example that may be of help. It's the opposite way around from what you need (sidebar col is on the left) but shouldn't take you 2 minutes to switch across.

    http://www.chriswilliamsdesign.com/hessodreamy/
    Y'd think it would only take a couple of minutes, wouldn't you? I've even tried copying all your css and changing the ids to the names I've used keeping your left-hand sidebar but even that doesn't work. Seems to suggest either my markup's awry or something elsewhere in my css is interfering with the 'outer' (or 'content') divs. Ooo eck! Thanks...

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to be getting it working now, thanks. Seems to need the sidebar to come before the main div in the markup - z-index doesn't seem to do the trick. Many thanks...

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you finally got it working! I'd JUST made you an example which I'll offer here if you need any more help:

    http://www.chriswilliamsdesign.com/gandalf/

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Chris. That's really helpful. I'm getting there, taking it a declaration at a time. Not quite there yet, some odd gaps - getting the margins and paddings in the right place! I assume only one z-index in a css doesn't do anything or am I wrong?

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know (I may be wrong) I think all elements appear on a certain "base" z-index as default - even if not defined. By stating a z-index you are in effect taking it out of the default layer and above (or below) it. Therefore I'm under the impression that even a single z-index statement should have an effect?

    I built this example a while ago now though, so can't really remember why the z-index is actually needed...

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it working quite well now, thanks. I noticed when I put a <hr> in my main div that the two divs seem to overlap by about 20px. I can't think why, but changing the right padding for main to 30px seems to have done the trick. Again, thanks G


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
  •