Max Design - Liquid layouts the easy way. Date: 30 December 2003 Author: Russ Weakley This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts. Some definitions Liquid layout All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. Liquid layout example Combination liquid and fixed layouts Similar to liquid layouts, except one or more of the containers on the page have fixed widths. Liquid/fixed layout example Fixed-width layouts All containers on the page have their widths defined in pixels or other fixed units. Fixed-width example Em-driven layouts All containers on the page have their widths defined in ems. Em-driven layout example You can also use combinations of the above.
The secret of liquid layouts Liquid layouts are easy to achieve if you follow some basic rules. Step 1 – Start with a layout grid Step 2 – Leaving space HTML code. Liquid Design for the Web. Tutorial 8. Tutorial 8 - Liquid two column layout - all steps combined Step 1 - Start with the semantically marked up code To lay out a page into two columns, you need to start with the basic page structure. In this case we will use some dummy content to create a two column template. The page has been grouped into five separate divs, and each of these div's has been been given a unique ID selector. The divs are labeled; "container" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "content" (for the main content) and "footer" (for the footer across the bottom of the page).
Step 2 - Add width and margin to the container To get the content to sit in from the edge of the browser window (or viewport) we need to set width and margins on the main div that wraps around the content. In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". To center the div in the viewport, we apply "auto" margins to left and right. The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible. Download this layout (20kb zip file). Percentage dimensions of the left menu layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left column: 162 pixels Main page: 550 pixels 1024 x 768 Left column: 210 pixels Main page: 709 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other.
No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column. No Images No JavaScript Mac. The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution.
Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other.
No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column. Applying Divine Proportion To Your Web Designs | How-To. Advertisement Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous1 posts2. However, how can you achieve a clear and intuitive design solution?
Well, there are a number of options — for instance, you can use grids, you can prefer the simplest solutions or you can focus on usability. However, in each of these cases you need to make sure your visitors have some natural sense of order, harmony, balance and comfort. And this is exactly where the so-called Divine proportion becomes important. This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs.
Divine Proportion Consider the example above. First, calculate the width of your #content-block. This is the whole idea behind the “Golden” proportion. The Rule of Thirds So how do you split a layout into 9 equal parts? Summary. Understanding CSS Positioning part 1 | KilianValkhof.com. Understanding CSS Positioning part 1 Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages.
This series of articles will thrive to explain the possibilities you have in positioning. It doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules. This part will introduce the positioning and display property. Part two, which will be published next week, will go more in-depth with the display attribute and delve into the float property.
The last part, published the week thereafter will be a preview to the new CSS3 layout modules. Display:hehwha? Before we start, it is worth noting that there are basically two types of ways to display an element in CSS: block and inline. Display:block; Block can be, quite literally, seen as a block. Flow.