SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jumping div in two column layout -why?

    Hi,
    Forgive me if this has been covered before, I did search but didn't find my issue. I can't understand why this is so difficult

    I have a test design at:
    http://212.158.113.24/index.html

    The layout is done with css and uses a floating left div for the navigation and a content div with a margin for the main content of the page.

    The problem I am having is that when the content div contains something wide, like an image (as you can see on the page), when resized smaller than the width of the object in IE 5, 5.5 and 6, the content div jumps down the page inline with the bottom of the navigation div?! It works in Firefox, Safari and IE 5.2 Mac.

    Unfortunately, I cannot predict the content of the page as it is inserted by our cms system. It does the same with tables etc.

    Does anyone know how I can stop div jumping?

    Thanks for any light you can shed

    Cheers,
    Jord

  2. #2
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any pointers?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres a little known trick that i was keeping a secret lol

    Put the center content in an inner float of 100% width and then give ie overflow:hidden and this will stop the float drop.

    Replace all the equivalent section of your code with this code as below.

    Code:
    #content {
    /* to allow page-options to be absolute positioned within this box 
    position: relative;*/
    /* make space for the various page options */
    padding-top: 4em;
    margin-left: 210px;
    padding: 20px;
    }
    /* stops tables within the content */
    #content #inner {
    width: 100%;
    float:left;
    }
    * html #content #inner {overflow:hidden}
    /* hide from other browsers \*/
    * html #content {height: 1%;}
    /* end hiding */
    #content #inner table {
    /* always force content tables to be 100% wide - uses !important so that CMS cannot override this setting 
    width: 100% !important;*/
    }
    That should do the trick

    The technique is used in this 3 col basic example and you can see that the middle column doesn't drop even though theres a very large picture.

    http://www.pmob.co.uk/temp/basic-3col-fluid.htm

    Paul

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You sir, are a life saver! Thanks very much


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
  •