SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having to specify width with floats

    I have this code:

    Code:
    .div_left {
    float:left;
    width:700px;
    margin-right:20px;
    }
    
    .div_right {
    margin-left:720px;
    min-height:20px;
    overflow:hidden;
    
    * html .div_right {
    height:20px;
    overflow:visible;
    }
    I apply it like so:

    Code:
    <div class="div_left">content here</div>
    <div class="div_right">content there</div>
    In IE and Firefox the right div works just fine, it auto fills out the rest of the space to the right, but in browsers like Chrome I have to specify a width in the div_right property otherwise everything in the div_right just disappears. Any ideas what I'm doing wrong?

  2. #2
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It appears to be working for me in firefox and chrome, however, if that is your code directly pasted, you seem to have missed a closing } for the .div_right if i'm not mistaken.

  3. #3
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bo5ton View Post
    It appears to be working for me in firefox and chrome, however, if that is your code directly pasted, you seem to have missed a closing } for the .div_right if i'm not mistaken.
    Thanks for looking! Yeah I realized that but when I fixed it still same issue. But I got it to work by removing the min-height and overflow hidden from div_right property. After I removed that everything worked for all browsers.

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

    Elements with overflow other than visible are special and need to control their boundaries exactly and take account of floated children (which is why we use it for clearing floats).

    When you apply overflow (other than visible) that element will form a rectangular box to the side of floated elements and will not wrap around it and margins may not slide under the floated element as before.

    Therefore the solution to your problem is simply to remove the margin-left.

    Code:
    .div_left {
        float:left;
        width:700px;
        margin-right:20px;
        background:red;
    }
    .div_right {
        min-height:20px;
        overflow:hidden;
        background:blue;
    }
    * html .div_right {
        height:20px;
        overflow:visible;
    }
    IE6/7 don't have this same behaviour with overflow but they do exhibit exactly the same behaviour when the element has "haslayout" which is what the min-height and the height:10px hacks are doing.


    If you remove the haslayout and the overflow as you have done then the element should line up correctly also but you will lose the block containment in the right column and if you have an floats in the right column that you clear you will also clear the whole left column.

    Therefore you would need to nest an inner element in that right column that is floated and 100&#37; wide to stop this from happening and to ensure that the content sits in an element with haslayout also.

    Taking that all into account the original overflow method is more succinct but will have a different behavior when the screen is sqeezed smaller as the right column will eventually drop and move under the left column - whcih in most cases is what you want. Using the margin-left method the right column will still drop in IE but will stay to the right and look a bit odd.


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
  •