Liquid Web Design
Get flash to fully experience Pearltrees
3 Column Liquid Layout | HTML Tutorials
A lot of people have wanted to make 3 column CSS layouts but have always managed to run into problems ... like I did the first time I tried. With this tutorial I hope to show you how you can overcome the problems of liquid layouts to create your very own liquid layout which will fit into the screen of the browser at any resolution. The style marked with an asterix simply denotes that all tags within the page will all have their styles padding and margin set to 0px;. The #wrapper is simply a container for the entire site layout.
Liquid layouts the easy way | Max Design
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. 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 . A liquid layout will move in and out when you resize your browser window. All containers on the page have their widths defined in pixels or other fixed units. They are completely independent of the viewport.
No Resolution
No Resolution is the only site dedicated to fluid and elastic design with CSS. Check out the resources and open-source templates, get help in the forum, or submit your favorite site to the gallery. When you need help and inspiration for truly effective flexible design, this is the place to visit!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. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions.
