Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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