Previous Message
Next Message

Two / Three columns float clearing in IE in 3col layout

Sent by David Pratt on 14 March 2006 13:01

Holly Bergevin wrote:
> From: David Pratt [EMAIL-REMOVED]>
>>Hi. Just a note to say I have reposted the updated the page at:
>>with the changes you have suggested. I have validated it for xhtml in 
>>the meantime. There are still a couple of quirks in IE. I have not got 
>>the top right to stop separating once the horizontal scrollbar appears. 
>>The three columns also appear a bit more left than centered in the main 
>>column so thinking there needs to be a couple of changes in the numbers 
>>to get this to work out a bit better. 
> The problem with the separating is because of the padding you have used (in two places) on .inner
. Since it is em-based, it increases in size when the test-size gets larger. IE expands the
container so that its children stay inside, so the separation happens. Remove the padding from inner
and use margins on all the elements inside, paragraphs and headings and such, to get the desired
separation of content in the columns.
> Even though this may "lick" the IE problem, you might want to check out what happens to your
center column in Firefox when the text-size is increased in that browser. The result is again
because of the em-based sizing on the side columns with the center column taking up the rest of the
available space. Though you have used a min-width on #pageWrapper, you might want to reconsider
those three mini-colums in the center one, or set a larger min-width.
> Hope that helps,
> ~holly 

Hi Holly. This is some very good advice and I appreciate your taking the 
  time to suggest these changes. More than that, your explanation is 
making this excellent and has made this problem much clearer to me. I 
continue with what you suggest and post the result when I have got this 
worked out. Many thanks.

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: