IE6 adding padding-right 17px to my wrapper

Hi, I've never had such a problem that I've not been able to fix. I've searched online without a fix and tried a number of things. Whats happening is IE6 is adding a 17px padding right to my wrapper container, but it only adds it when the overflow is set to auto, if I remove overflow then it's fine expect for the fact that my wrapper contains float elements which means it does not extend with them.

Here is a basic example of the code:

<div id="wrapper">
    <div id="left">
         content here
    </div>
    <div id="right">
        menus here
    </div>
</div>

Code (markup):

css:

#wrapper {
    overflow: auto;
    width: 982px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    }

#left {
    float: left;
    width: 730px;
    margin: 0px;
    padding: 0px;
    }

#right {
    float: right;
    width: 242px;
    margin: 0px;
    padding: 0px;
    }

Code (markup):

basically the #right div gets pushed under the left one because the wrapper gets a padding of 17px to the right added to it. This only happens when the overflow is set to auto and it is needed for my design. Anyone got a solution?

 

Set #wrapper {overflow: hidden;}. IE is adding space for the potential scrollbar, which, of course, won't happen. The overflow hidden will generate the new block formatting context in modern browsers, and having the width set triggers hasLayout for older IEs. You might also try {display: table;} instead of the overflow property. See my enclosing float elements article for options.

cheers,

gary

 

overflow:auto gives you a scrollbar whether you like it or not. That's your extra width.

Might I ask why auto is 'needed' since I'd be immediately diving for 'hidden' given that your inner elements are also fixed width? I mean, you want auto, that's what the body is for... If worried about an image in the content or something, put a wrapper around the image and set auto on that.

Silly question, but what happens if you float them both left? Really though these are the types of issues that made me switch to using the extra wrapper so I could have content first fluid layouts. Fixed layout is just made of /FAIL/.
I would probably be doing this:

<div id="fauxColumns">
	<div id="contentWrapper"><div id="content">
		content here
	<!-- #content, #contentWrapper --></div></div>
	<div id="sideBar">
		menus here
	<!-- #sideBar --></div>
</div>

Code (markup):

/* assumes you are using a reset on DIV's */

#fauxColumns {
	overflow:hidden; /* wrap floats */
	width: 982px; /* also trips haslayout, so floats will wrap in IE */
	margin:0 auto;
}

#contentWrapper {
	width:100%;
	float:left;
}

#content {
	margin-right:252px;
}

#sideBar {
	position:relative;
	float:left;
	display:inline; /* prevent IE margin doubling */
	width:242px;
	margin-left:-242px;
}

Code (markup):

Same as the content first three column layouts - That way you want to change your outer wrapper your content area will dynamically change size. Opens the door to using min-width and max-width instead of going with a crappy little stripe fixed width that's too wide for netbook and a joke on 24" displays like mine. I actually find it easier to design for fluid and then fix the outermost element's width if fixed is what the client wants.

Though that doesn't use the auto - might I ask what you would have for content warranting it's use?