Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble lining up divs in IE; works fine in Chrome

    I have a three-column layout where it appears as I want it to in Chrome, but not in IE. In IE, the middle column starts below the end of the third column.

    I've tried changing some orders of the css, I've shrunk the middle column's width, I've placed the third column's html in the middle column div (it disappeared), but I can't line it up right.

    The page is yeetownDOTcom. Add /index.php if it directs to a facebook page.

    I've attached photos of how they appear on my computer.

    Thanks for any help!
    Attached Thumbnails Attached Thumbnails Trouble lining up divs in IE; works fine in Chrome-chromeview.jpg   Trouble lining up divs in IE; works fine in Chrome-ieview.jpg  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    The width of #mnContent is too wide to fit into the space remaining between the left and right columns. Drop the width of this dov to about 590px and give that a go.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SidebarLeft, Content, and SidebarRight should all be floated left with a containing div around them that has overflow:hidden on it.

    HTML:
    Code:
    <div id="container">
      <div id="left">Sidebar</div>
      <div id="content">Content</div>
      <div id="right">Sidebar</div>
    </div>
    CSS:
    Code:
    #container { width:750px; overflow:hidden; }
    #left, #content, #right { float:left; }
    #left { width:240px; margin-right:10px; }
    #content { width:500px; }
    #right { width:240px; margin-left:10px; }
    You should really try this barebones example to see how floats and such work so you can set them up right in the future.

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent help. Now I'm just having trouble making the container with side images of pink dots appear in IE. They show in Chrome.

    Also, I made the mnContent div thinner to fit it, but I originally wanted text in that div to wrap around the rightsidebar on the bottom when text or whatever is longer than that. Anything I can do to that?

    Thanks for the help guys.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If you're trying to achieve that layout then you really want a two column layout, rather than three at the moment, and then float that right hand div within the right hand of the two columns.

    Something like:

    Code:
    <div id="container">
      <div id="left">Sidebar</div>
      <div id="content">
          <div id="right">Sidebar</div>
           Content
     </div>
      
    </div>
    and:

    Code:
    #container { width:750px; overflow:hidden; }
    #left{ float:left;width:190px;}
    #content {margin-left:200px }
    #right { width:240px; float:right }

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    IE doesn't like that image for some reason - which is why your background isn't showing up. I suspect it's because it's CMYK rather than RGB format. It's also very large - 557kb for 1040 by 25px. I'd suggest redoing the image and saving as RGB - which will make it smaller - you don't want a background image that big anyway.
    Last edited by SB65; 08-07-2010 at 12:01 PM.


  •  

    Posting Permissions

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