General Layout
Back to Tutorial Categories
Multi-Column Layouts Climb Out of the BoxCreate an elastic multi-column layout of equal height. |
6 Keys to Understanding Modern CSS-based LayoutsMuch of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. |
CSS Cheat SheetsThe CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for. |
Conflicting Absolute PositionsMaking full screen layouts fill the browser window horizontally AND vertically...without javascript. |
Elastic DesignNot quite liquid, yet not fixed-width either, Elastic Design combines the strengths of both. Done well, it can enhance accessibility, exploit neglected monitor and browser capabilities, and freshen your creative juices as a designer. |
Centering Your Web Site With CSSUsing CSS to center elements on a Web site — whether it's the entire page or a single block or tag — can be a little tricky at first, especially if you've only used tables to center elements before. We'll look at the markup for centering your Web site while tweaking the CSS to ensure that older browsers will recognize the centering effect you want. |
Advanced CSS Layouts: Step by StepThis tutorial sets out to prove that complex layouts can be achieved using only CSS. |
Create a CSS message box which hovers over your layoutIn this tutorial we will be creating a message box that overlays onto your layout, you can use it for many reasons like manitory sign-in on forums or an annoucement you need to be read. This tutorial is a combination off CSS and Javascript. |
FloatutorialFloatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. |
Achieving 100% HeightOne of the most common layouts on the web is a fixed width site that stretches to the bottom of the page, with a footer sitting at the bottom. If the content of the page stretches past the bottom, the site container needs to stretch with it. |
The Incredible Em & Elastic Layouts with CSSWhat is an “em”? Using ems to create an elastic layout with scalable text and images. |
Cross-browser transparent columnsA demonstration of how to implement cross-browser transparent columns. It’s used by having combination a transparent div with the same height as it’s parent and a div containing the content. |
2 Methods for Rounding Corners with CSSThis tutorial will teach you exactly how you can use a mix of XHTML, CSS and a few images to add rounded images to your designs. |
Three column fixed layout structureThis post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects. |
Advanced CSS Layouts: Step by StepRogelio 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. |
How To Create a Horizontally Scrolling SiteIf we are responsible with our web layout, we can go “against the grain” and create web pages that use primarily horizontal scrolling and can even expand horizontally as we add more content. Perhaps a slight blow to “useability”, but it sure can be a cool creative touch! |