CSSplay


Percentage PLUS pixel widths

by Stu Nicholls

Home Page

Explanation

Example 1

This box is 50% PLUS 100px wide (50px + 50px).

Example 2

This box is 25% PLUS 200px wide (100px + 100px).

Example 3

This box is 15% PLUS 300px wide (150px + 150px).

Example 4

This box is 50% PLUS 200px wide (100px + 100px).

Example 5

This box is 25% PLUS 200px wide (0px + 200px).

Example 6

This box is 15% PLUS 250px wide (250px + 0px).

Strange Layout


This is the float:left; box

This is the float:right; box

Resize this to see what happens.

Strange Layout II

This is the center box

Resize this to see what happens.

This box is 50% wide with a 50px border and contains another box which has the same TOTAL width

Tracker Box

This box is 100% PLUS 100px wide (50px + 50px).

This box will track the outer box to maintain the same width including the fixed pixel size borders,

So you can see that the above box will resize to match the TOTAL width of this box