Google chrome not flushing out margin with float

HTML & CSS
1

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:


#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:


    <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

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

#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 :slight_smile:

3

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

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?

5

PM sent.

Thanks!

6

Try removing the margin on #content_right and putting overflow:hidden; back in on that :slight_smile:

7

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

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. :slight_smile:

9

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

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 :slight_smile:

11

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

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 :slight_smile:

13

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.