CSS play

Doing it with Style

Search CSS PLAY

BOX MODEL DEMONSTRATIONS

Responsive flex box gallery
12-10-2019
A simple gallery using flex box to display the thumbnails and large image.
Percentage border widths and text size
06-09-2014
A CSS only method of producing percentage border widths and text sizing without using @media queries.
IE6 3px Float FixAnother way to fix the 3 pixel float error in Internet Explorer.
Left ScrollbarsHow to place the scroll bar on the left.
Transparent border error in IE7
17-09-2007
IE7 styling error for transparent borders.
Transparent borders for IE5/6
17-09-2007
How to style transparent borders for IE5.x and IE6.
Border ColorsA look at the way different browsers do border colours.
Border WritingHow to put text in your borders.
Four curved corners
01-01-2007
A <dl> used for 4 curved corners.
Three curved corners
01-01-2007
A <dl> used for 3 curved corners.
Curved CornersAn unusual way to do curved corners.
CSS3 3D Jack-in-the-box
11-03-2012
A 3D Jack-in-the-Box demo
Jack in the BoxA flip top box.
Responsive 'background' images
24-04-2013
For IE7/8 to emulate background-size:cover
CSS3 Background Images
28-07-2010
Background image 100% of the conatainer
Side slants - revisited
28-10-2006
Another look at side slants/dd>
Chunky borders
13-03-2007
Chunky borders and bubbles.
Krazy KornersMore corners without images.
More Snazzy Borders
22-07-2006
Another idea for snazzy borders.
Snazzy BordersSnazzy curved corners, no images.
Min-Height for IE6A cross browser min-height.
max-width for IE6
05/10/2009
A CSS only max-width in IE6ions.
Min-Width for IE6Min-width in Internet Explorer IE6.
Percentage PLUS PixelsA width as a percentage plus pixel amount.

Information

These examples explore what is possible using the box model.

From simple rounded corners to complex borders and even a css only fix for the lack of support for min-width in Internet Explorer.

Please note that in most cases you will need to use a standards compliant doctype to ensure that IE6 correctly renders the box model.
Unfortunately IE5.x will need hacks to compensate for it's incorrect interpretation of the box model.

For a list of standards compliant doctypes see the w3.org website's recommended DTDs to use in your web document.

Support CSS play

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.

Copyright

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.