Elastic Calendar Styling With CSS | CSS-Tricks

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This post was co-authored by Chris Coyier and Tim Wright of CSSKarmaA traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit. You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.Let’s have a look, shall we?View Demo Download ExampleThree Ordered List...