SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  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)

    Google chrome not flushing out margin with float

    Im using a float to put a menu on the left side, then I want the remaining space on the right side to be taken up by another div so the div next to the float Im using margin-left to go as far as the total div width that is floating left. The problem is in Google Chrome the div on the right only goes, width wise, as wide as the content inside the div. Firefox and IE both use the whole space remaining on the right side but just in Chrome the width doesnt go all the way to the right.

    Here is a screenshot of it working:
    http://www.webrightstudios.com/working_example.png

    Here is a screenshot of it not working correctly in chrome:
    http://www.webrightstudios.com/chrome_issue.png

    I have this css:

    Code:
    #content_left {
    float:left;
    width:300px;
    min-height:1px;
    overflow:hidden;
    margin-right:25px
    }
    * html #content_left {
    height:1px;
    overflow:visible
    }
    #content_right {
    margin-left:325px;
    min-height:1px;
    overflow:hidden;
    min-weight:1px
    }
    * html #content_right {
    height:1px;
    overflow:visible
    }
    Then in the html its setup like this:

    Code:
        <div id="content_left">
          <div class="menu_header">Account Information</div>
          <div class="menu_body">
            <ul id="menu_list">
              <li><strong>Last Update:</strong></li>
              <li><strong>Last Login:</strong></li>
            </ul>
          </div>
        </div>
        <div id="content_right">
          <div class="menu_header">My Account Details</div>
          <div class="menu_body">
            <form id="site-form" action="" method="post">
            <table cellspacing="0" cellpadding="4" width="100%">
              <tr>
                <td class="form_label"><label>Display Name <span class="form_required">*</span></label></td>
                <td class="form_value"><input type="text" name="dname" value="" class="input-text req-string" tabindex="1"></td>
              </tr>
              <tr>
                <td class="form_label"><label>Username <span class="form_required">*</span></label></td>
                <td class="form_value"><input type="text" name="uname" value="" class="input-text req-string" tabindex="2"></td>
              </tr>
              <tr>
                <td class="form_label"><label>New Password</label></td>
                <td class="form_value"><input type="password" name="pass1" class="input-text" tabindex="3"></td>
              </tr>
              <tr>
                <td class="form_label"><label>Retype Password</label></td>
                <td class="form_value"><input type="password" name="pass2" class="input-text" tabindex="4"></td>
              </tr>
              <tr>
                <td class="form_label"><label></label></td>
                <td class="form_value"><input type="submit" id="FormButton" name="UpdateAccount" value="Update Account" tabindex="5"></td>
              </tr>
            </table>
            </form>    
          </div>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, It's hard to see with just that code..a link would be preferable (PS-you know that min-weight isn't a valid property ? On #content_right)

    The problem (probably) is the overflow:hidden; set here
    Code:
    #content_right{overflow:hidden;}
    It establishes a new block context and that's probably why..

    I am just guessing here..post a link if ya got it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  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 RyanReese View Post
    Hi, It's hard to see with just that code..a link would be preferable (PS-you know that min-weight isn't a valid property ? On #content_right)

    The problem (probably) is the overflow:hidden; set here
    Code:
    #content_right{overflow:hidden;}
    It establishes a new block context and that's probably why..

    I am just guessing here..post a link if ya got it
    Drats, it requires a login. However I did remove the hidden part and it works for the most part except now it looks like this in all browsers:

    http://www.webrightstudios.com/issue_part2.png

    Is there anything else you can suggest or do you need to see more code for this issue as well?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hard to say at this point..make sure the content_left is floated.

    If so, then put a border around each. See if there is enough room..if that doesn't help at all then PM me the link/login and I'll look at it (you can trust me )

    I doubt you can do full code?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    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 RyanReese View Post
    Hard to say at this point..make sure the content_left is floated.

    If so, then put a border around each. See if there is enough room..if that doesn't help at all then PM me the link/login and I'll look at it (you can trust me )

    I doubt you can do full code?
    PM sent.

    Thanks!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try removing the margin on #content_right and putting overflow:hidden; back in on that
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    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 RyanReese View Post
    Try removing the margin on #content_right and putting overflow:hidden; back in on that
    Sweet, that worked! Thank you very much. Question though, I had asked a similiar question awhile back and the answer was to use the margin for a 2 column layout. Why would I need to remove it in this instance?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I didn't look too much into it in this case, there was probably something conflicting with it, you normally should use margins yes, but you have something else going on. If you REALLY want to know I'll take a look.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    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 RyanReese View Post
    I didn't look too much into it in this case, there was probably something conflicting with it, you normally should use margins yes, but you have something else going on. If you REALLY want to know I'll take a look.
    Well that would be up to you, but if you could take another look at it that would be very appreciative because if Im doing something wrong I would like to know so I can do it correctly in the future.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yup you were doing something wrong (use the margins and not overflow:hidden)

    You have clear both on this element in hte left column ".menu_header"

    Thus it clears the right column. Take that out
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    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 RyanReese View Post
    Yup you were doing something wrong (use the margins and not overflow:hidden)

    You have clear both on this element in hte left column ".menu_header"

    Thus it clears the right column. Take that out
    Ok I will take a look, I thought though the clear both was limited to the div its inside of, #content_left. But your saying the clear both also affects divs outside of #content_left?

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If the clear is in that floated column like that, theni t will clear the subsequent element adjacent to the floated element, in this case, #content_right
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,349
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok I will take a look, I thought though the clear both was limited to the div its inside of, #content_left. But your saying the clear both also affects divs outside of #content_left?
    "clear" affects all previous floats in the html unless the parent of the cleared element is a float itself or the parent has overflow other than visible (haslayout is needed for IE6) . More info here.


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
  •