SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Left content truncated in 2 column layout

    Hi all,

    I have a standard 2 column layout with the left column a left-floated div and the right content a non-floated div with a left margin pushing it out beyond the left column.

    Works fine typcially, however whenever my right content has less 'height' than my left content the left content gets clipped to the same height as the right. Either column can have varying content heights.

    Needless to say this only happens in IE!

    Any ideas on how i can fix this, my two classes are as follows.

    .LeftMenuContent
    {
    float:left;
    width:130px;
    padding-left:10px;
    }

    /*Pushes our right content out beyond our floating left menu*/
    .RightContent
    {
    padding-top:5px;
    margin-left:150px;
    }

    I am thinking of going back to tables at this rate - until IE gets with the program.

    cheers

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would need to see more of your code because there's no reason IE should be doing what you're describing from what you've shown so far.

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to have resolved this issue for the moment. Turns out sticking a 100% height in the RightContent fixed my problem.

    I don't want to post my actual code up - it may have been something to do with the complex tables being rendered in the right content - i am not sure.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Turns out sticking a 100% height in the RightContent fixed my problem.
    Sounds like a layout issue (see faq on haslayout). Adding a dimension will cure the problem but usually you would use 1% height and make sure it's hidden from all browsers except ie6 and under.

    Code:
    /* mac hide \*/
    * html  .RightContent  {height:1%}
    /* end hide */
    If you have given a 100% height them mozilla will only ever be 100% high and not expand to accomodate more content (assuming that it can interpret 100% height anyway (which it probably won't if the parent is heigth :auto or based on a percentage itself - see faq on 100% height for more info))


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
  •