You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Problems setting width on Floating Elements

Example 1 - Floating Widths Shorten to Fit Contents

The first problem here deals with floating elements. On floating elements, the width is being interpreted as a maximum width, but the float is being made smaller when the text contents do not span the width.

The following element is floated left and should be 400px wide, including its border (the width was set to 398px, and the border is 1px). If you have images enabled, you will see a ruler has been placed to allow you to measure the size of the table. The ruler is in pixels.

400px Floated DIV

Example 2 - Floating Widths Shorten to Fit Wrapped Contents

Even when the text does span the width, the width is too small, because Opera reduces the width to the length of the longest line after line-breaking has been performed. This is a serious problem: float widths are often used to generate a consistent layout or are used for backgrounds.

The following element is floated left and should be exactly 400px wide, including its borders (see above). If you have images enabled, you will see a ruler has been placed to allow you to measure the size of the table. The ruler is in pixels.

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz