10 Things to Consider While Creating Your Page Layouts by Using CSS

DZone 's Guide to

10 Things to Consider While Creating Your Page Layouts by Using CSS

These often overlooked tips help you cross the t and dot the i of yours CSS layout's DIV positioning and troubleshoot with IE's SuperPreview.

· Web Dev Zone ·
Free Resource

A lot of pressure is applied within the web design community for web designers to discard tables as a design tool. Moreover, the W3C advises not using tables for layout.

Web designers can also use CSS for layout, rather than tables. In this blog post, we will cover 10 simple tips that will help you create CSS layouts.

1. Use Nested DIVs

Many designers use only relative positioning while designing a CSS layout, but when you use nested DIVs, you will see that using absolute positioning can offer your more flexibility. Absolutely-positioned DIVs behave differently whether they are nested inside other DIVs.

If you put an absolutely-positioned DIV into another DIV, you will notice that its default location will be on the upper-left corner of the DIV container, not the page. Normally, the absolutely-positioned DIV will flow with another DIV when the window of a browser is sized so that your layout flows in the same way you want it to.

2. Make Small Changes and Test CSS Styles on a Regular Basis

Don’t make changes in the attribute of a style without testing between changes. Detecting the main cause of minor positioning discrepancies is quite difficult. If you make small amendments and then test positioning, you will not only evade a blackbox problem later, but will also discover new things.

It is extremely important to use this rule because positioning changes to one component will affect all the other components that are relative to it. Therefore, it's better to make small changes and carefully test on a regular basis.

3. Never Use Layers Exclusively

A "layer" is basically a DIV that is absolutely-positioned. In fact, it is bad to create a page layout by using them. You should use a combination of absolute and relative positioning for the DIVs instead.

4. Place Larger Page Components First

You can position larger page elements before the smaller ones. For instance, if you have a huge area at the top of a web page to contain a logo, you can position that component first and then place the other elements relative to it.

5. Utilize SuperPreview to Detect Positioning Issues

You can use SuperPreview to test your layout positioning as it allows you to preview your page in different versions of IE. In some situations, IE6, IE7, and IE8 will all place components in different positiona. SuperPreview is a great tool as it detects and corrections postitioning problems.

6. Consider the Quick Position Display Box in SuperPreview

If you choose a component in SuperPreview, you will notice a quick position display box that displays the dimensions and position of the selected component. Using this box, you can detect how far off positioning is, and such information can help you while detecting the cause of problems. 

7. Choose your HTML Elements Deliberately

Being a web designer, you may want to stay away from some of the page elements that render differently in different browsers. One of the easy ways of crafting a CSS menu system is to utilize an unordered list and a float on the specific list items. Although, after moving this kind of menu onto an explicitly positioned DIV, you may see that positioning varies between different web browsers. In that case, it will be better for you to use nested DIVs for your menu items.

8. Manage Your hasLayout

In the IE Document Object Model (DOM), you will find an internal property, known as hasLayout, which is applied to DOM elements under several conditions. However, you cannot set this property explicitly, but only implicitly, if you know its working procedure. Positioning problems in IE can be avoided by rendering a particular element with the hasLayout property in the DOM SuperPreview. An element where hasLayout is true will have orange-colored bracket around it; if you see gray brackets then it means hasLayout for those elements is false.

Note: There is no meaning of hasLayout property in IE8 mode.

9. Use the Correct Method for Centering DIVs

If you want to position your DIV to the centre in your page, ensure that you do it properly or you will wrap up with a page that coverts to chaos when the window browser is optimized. To properly center a DIV , you need to follow three things. First, you need to set the position property. Second, fix the width for your DIV . Third is to set both the left and right margin to ‘auto’.

You can also see this in the following CSS code:

mainContent {
 position: relative
 width: 900px;
 margin-left: auto;
 margin-right: auto;}

10. Carefully Use Both the Graphics and CSS Color Properties

One of the most common techniques of using CSS layouts is to position DIVs in proximity to page graphics. While doing this, CSS color properties are used to match colors in graphics. You can match colors in CSS properties by using a color picker and picking from your graphic, but doing this can be a bad idea. Colors look slightly different in different browsers, so the color you choose with the color selector might be display differently in other browsers.

If you want to avoid this issue, you need to ensure you're using accurate color values in CSS that match the color values that you use in your graphics application.


With the use of these handy tips, you can set up a complicated layout by using CSS easily and efficiently. However, the essential thing that you can do is to become an expert in this area by creating layouts and detecting layout problems.

css, web development

Published at DZone with permission of Andrey Prikaznov , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}