Little Boxes. Advanced CSS Layouts: Step by Step. Abstract The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations. Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables.
Numerous bugs were discovered in Netscape and Internet Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design. Introduction In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts.
The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. Examples - In search of the One True Layout. You'd probably feel cheated if I didn't roll out some more examples that give an idea of how these techniques could be put into action. So without further ado: [1] Interactive Demo Add columns! Switch the order around! You call the shots. Nested Rounded Corners A pixel-based fixed width layout that shows just how crazy you can go repeatedly nesting the combined technique within itself.
Not only is this a layout that would be impossible to achieve with a table-based layout [2], but the source ordering is a joy compared to how you'd have to do it [3] Of course, this version is somewhat overladen with hacks and additional markup. Boxes A scalable em-based layout which is unremarkable other than the fact that it raises yet more questions about Opera's positional abilities, and that it would be nigh on impossible to achieve with Faux Columns. Borders with backgrounds A liquid percentage-based layout that is utterly unremarkable. Results for these examples can be found in Appendix C. BBC home page. Css Zen Garden: The Beauty in CSS Design. CSS examples. CSS Rounded Corners 'Roundup' 4Google + Note: This post is continually updated as I come across new techniques. This collection of techniques to create boxes with rounded corners using CSS has become quite popular.
The problem now is there are so many choices it's hard to know which one to choose. To that end I've provided some more information about each method in order to help people choose which best fits their needs. Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS — no images or JavaScript required (more markup is needed though). Not Sure Which One to Use? There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not. Try out a few methods and see if there's one that fits. Click on a column heading to sort the table by that column.
CSS Only Methods.