Drew: Thank you for your reply. >This what you want?< Not exactly. Because this example uses 600px exactly, what you proposed would work. A real-world elastic page presents borders, margins etc. resulting in unknown percentages along with the normal rounding errors that occur in IE. Thus typically we would make the columns add up to something less than 100%, which is why I used 25%, 40%, 25% to illustrate the problem.
David suggested trying to use a 5% left and right margin on the center <div>. It sounded pretty logical and I extended that thought to implement only a left margin so that I wouldn't need to be concerned with rounding errors. However, what I learned was that the normal display:inline hack used to fix the IE margin bug, doesn't work when you are dealing with any unit other than pixels for the margin size. Since I could find no way around this bug nor logic to the size of the margin the IE was creating, I came up with this non-elegant, partial work-around. <div style="width:600px; text-align:center;"> <div style="float:left;width:25%; background-color:#ff0000;">This is container 1</div> <div style="float:left;width:5%;"> </div> <div style="float:left; width:40%; background-color:#00ff00;">This is container 2</div> <div style="float:right; width:150px; background-color:#0000ff;">This is container 3</div> </div> Since adding the left margin on the center <div> did not work with IE, I added a 5% width <div> as a faux margin between the first and second element. This works-around using the using a margin(s) on the center column. The problem with this method is that it does not guarantee the object will be acceptably centered since the use of percents with non-evenly divisible larger sizes yields non-symmetries that can be quite apparent. However, at least this method uses percentages and thus retains the elasticity of the layout. The ideal solution would center the middle <div> between the first and last columns so the impreciseness of percents would not affect the precision of the centering. This would also enhance the maintainability of the code since if we added a border, padding, etc. later, we would not need to calculate a new width for the faux margin <div>. Thanks! -----Original Message----- From: Drew Trusz [mailto:[EMAIL PROTECTED] Sent: Wednesday, June 13, 2007 6:55 AM To: Jack Toering Subject: Re: [css-d] How can I Center the Middle Column? >This what you want? ><div style="width:600px; text-align:center;position:relative"> ><div style="float:left;width:30%;">This is column 1</div> <div style="float:left;width:40%; margin:0 auto;">This is column 2, the one I want > >entered between 1 & 3</div> <div style="float:right; width:30%;">This is column 3</div> </div> On 6/12/07, Jack Toering <[EMAIL PROTECTED]> wrote: > Thanks David Hucklesby > > >Try changing the margin of the middle column to "margin:0 5%;". Add > "display:inline;" to prevent IE's margin doubling< > > I was hoping for some clever way to float it in the middle. Oddly, > even this doesn't work in IE as it doubles the margin anyway. (I've > used this fix before myself and it worked.) > > <div style="width:600px; text-align:center;"> > <div style="float:left;width:25%; background-color:#ff0000;">This is > container 1</div> > <div style="float:left; width:40%; margin:0 0 0 5%; > background-color:#00ff00; display:inline;">This is container 2</div> > <div style="float:right; width:25%; background-color:#0000ff;">This > is container 3</div> </div> > > Jack T. > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
