percentage widths and floats

Hello

I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

It appears to work fine. Although the widths add to 100%, I'm
concerned that when a browser converts the percentage to an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. But may I missed it?

Please advise, thanks

dave wrote:

Hello

I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

It appears to work fine. Although the widths add to 100%, I'm
concerned that when a browser converts the percentage to an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. But may I missed it?

Please advise, thanks

Older versions of IE can have problems related to this. I suggest that
the sum not exceed 98%. In at least one of my sites, where I used such
a technique to create a 2 column layout, I had to keep the sum under 96%.

C A Upsdell wrote:

dave wrote:

I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

It appears to work fine. Although the widths add to 100%, I'm
concerned that when a browser converts the percentage to an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. But may I missed it?

Please advise, thanks

Older versions of IE can have problems related to this. I suggest that
the sum not exceed 98%. In at least one of my sites, where I used such
a technique to create a 2 column layout, I had to keep the sum under 96%.

Do you really need to specify both column widths? I'd think only
specifying the 34% would make the other one adjust itself.

Irina

--
Experience is what you get when you were expecting something else.

Irina Rempt wrote:

C A Upsdell wrote:

dave wrote:

I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

It appears to work fine. Although the widths add to 100%, I'm
concerned that when a browser converts the percentage to an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. But may I missed it?

Please advise, thanks
Older versions of IE can have problems related to this. I suggest that
the sum not exceed 98%. In at least one of my sites, where I used such
a technique to create a 2 column layout, I had to keep the sum under 96%.

Do you really need to specify both column widths? I'd think only
specifying the 34% would make the other one adjust itself.

If, for example, you want both columns to have the same width, but avoid
the IE problem, you should specify both to ensure that they will be the
same and that the IE problem will not be triggered.

On Feb 16, 4:50*pm, C A Upsdell <cupsd... (AT) upsdell (DOT) invalid> wrote:

Irina Rempt wrote:
C A Upsdell wrote:

dave wrote:

I have a 2 column layout with columns set at 66% and 34%. *Both
columns use float left.

It appears to work fine. *Although the widths add to 100%, I'm
concerned that when a browser converts thepercentageto an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. *But may I missed it?

Please advise, thanks
Older versions of IE can have problems related to this. *I suggest that
the sum not exceed 98%. *In at least one of my sites, where I used such
a technique to create a 2 column layout, I had to keep the sum under 96%.

Do you really need to specify both column widths? I'd think only
specifying the 34% would make the other one adjust itself.

If, for example, you want both columns to have the same width, but avoid
the IE problem, you should specify both to ensure that they will be the
same and that the IE problem will not be triggered.- Hide quoted text -

- Show quoted text -

Without specifying the width, the 2nd column can break if it contains
enough content.

For now I'm using 64% and 33.8%. The layout I have is set with about
800px min-width and 1024px max-width. For IE6 it is fixed at about
800px.

The .2% should give about a 1px 'buffer' for error. I think I'll live
with the right side having an extra pixel or so.

In article
<5d09526a-9206-48de-be02-2a2bce761934 (AT) e22g2000vbe (DOT) googlegroups.com>,
dave <dave8421 (AT) hotmail (DOT) com> wrote:

On Feb 16, 4:50*pm, C A Upsdell <cupsd... (AT) upsdell (DOT) invalid> wrote:
Irina Rempt wrote:
C A Upsdell wrote:

dave wrote:

I have a 2 column layout with columns set at 66% and 34%. *Both
columns use float left.

It appears to work fine. *Although the widths add to 100%, I'm
concerned that when a browser converts thepercentageto an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

I did not find anything in css specifications that visual agent should
ensure that widths adding to 100% should be the same as if only a
single 100% value was used. *But may I missed it?

A minor pedantry: You could not have such a specification because it
would make no sense for pixel monitors and pixel browsers. If a browser
window was an odd number of pixels wide, how is the percentage to be
calculated to ensure 100% stretch of two columns that are nominally
specified in percentages to make up to 100%?

Not so minor are IE bugs that bugger things up beyond this quibble.
Leave some leeway as others suggest, specify container widths and test
thoroughly. Don't worry about a few pixels here and there.

For now I'm using 64% and 33.8%. The layout I have is set with about
800px min-width and 1024px max-width. For IE6 it is fixed at about
800px.

The .2% should give about a 1px 'buffer' for error. I think I'll live
with the right side having an extra pixel or so.

You are cutting it fine! Sounds like more than an extra pixel
unaccounted for worries you.

--
dorayme

In article <doraymeRidThis-B3252B.17440317022009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

A minor pedantry: You could not have such a specification because it
would make no sense for pixel monitors and pixel browsers. If a browser
window was an odd number of pixels wide, how is the percentage to be
calculated to ensure 100% stretch of two columns that are nominally
specified in percentages to make up to 100%?

Sorry. You could! It could say to round down or something.

--
dorayme

On 02/16/09 01:58 pm, dave wrote:

I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

It appears to work fine. Although the widths add to 100%, I'm
concerned that when a browser converts the percentage to an absolute
pixel value (e.g. it may possibly round up), the 2nd float may break
and appear under the first.

In general I have found IE6 to behave badly when the percentages add to

100%; IE has problems with arithmetic. Usually selecting 99% solves the
problem without any noticeable visual defect.
The percentage must further decrease as padding or margins are added,
which may also be specified with percentage, and borders which are usually
in pixels. When borders or non-% margins are added, the width percentage
is selected to allow the narrowest viewport you want the layout to retain
its shape.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Jim Moe wrote:

On 02/16/09 01:58 pm, dave wrote:
I have a 2 column layout with columns set at 66% and 34%. Both
columns use float left.

In general I have found IE6 to behave badly when the percentages add to
100%; IE has problems with arithmetic. Usually selecting 99% solves the
problem without any noticeable visual defect.

I agree, but you do have to be mindful of any content within a column
that may be wider than the designated %, especially in narrower windows.
Things to watch out for are wide graphics, or long words in a narrow column.

The overflow behavior in IE6 is broken, so contrary to specs it will
stretch the width to hold the content. This usually causes one floated
column to slide under the other. If you specifically set overflow:hidden
on the columns it should prevent this bad behavior. Setting overflow or
max-width (on images in particular) should work acceptably in other
browsers, including IE7.


--
Berg

On 02/17/09 02:25 pm, Bergamot wrote:

The overflow behavior in IE6 is broken, so contrary to specs it will
stretch the width to hold the content. [...]

Ooh, that's right. IE treats divs like a table cell in that respect.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)