SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Toronto, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with float in 3 col layout in IE please help!

    Hi,

    I am really new to CSS layout (not CSS styling), and I want to get into it for the sake of easy coding and reading the code. But I have been dreading it cuz of the IE incompatibilities...

    I am desiging a site, and so far the CSS layout (with tutorial help) has been fine, and I understand it. Here's the site I'm working on that has a problem with IE:
    http://kingfest.jlander.com/kingfest01.html
    here's the page without the photo:
    http://kingfest.jlander.com/kingfest01-nophoto.html
    (please ignore all the table stuff at the top for the header, I wasn't brave enough to do the entire thing yet in CSS)

    Before I added the sepia-coloured photo montage in the middle column, the page rendered great in Safari, Firefox, and IE. As soon as I added the image, which should fit perfectly because its width is the exact column width minus, IE breaks, and the photo and the text beneath drops way down the page below the end of the left column.

    I am thinking this is a margin problem, and that the margins in IE are rendering too wide, so the photo no longer fits in the middle column ID div #mainMiddle.

    Can anyone help with a suggestion on how to fix this please?


    Thanks very much (eager to learn the ropes)

    Jonfen

  2. #2
    SitePoint Enthusiast S.Vasiliy's Avatar
    Join Date
    May 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add these #mainMiddle div {float:right;} to your kingfest.css and it will work in ie too

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Toronto, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by S.Vasiliy
    add these #mainMiddle div {float:right;} to your kingfest.css and it will work in ie too
    Didn't work for me, S.
    Adding that to the CSS broke the page more in all my browsers.

    I should just clarify -- IE6 Windows is the problem (not mac).

    If anyone else has a suggestion, I'd really appreciate it.

    Thanks!
    Jonfen

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to ensure you have added the margin and padding to your content width. The reason it is dropping in IE is because your width isn't set correctly.
    Redo your math and see if it moves up..... the widths of all columns plus any margins and padding on each of your areas needs to add to your total width...
    You may need to adjust the width on the outer columns for the middle to squeeze back up again (in IE at least )


    Nadia


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
  •