Things to Consider While Creating Your Page Layouts by Using CSS

Things to Consider While Creating Your Page Layouts by Using CSS

0 30295
Page Layouts by Using CSS

There is a lot of pressure in the web design community for web designers to discard tables as a designing tool for page layout. Moreover, the W3C (the community responsible for crafting web standard recommendations) advised that don’t use tables for layout until they are linearized. Web designers can also use CSS for layout, rather than tables. So in this blog post, we will cover the 10 simple-to-follow tips that will help you create CSS layouts, without any hassle.

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. Actually, absolutely positioned DIVs perform differently when they are nested inside the other DIV.

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. 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 amendments and test CSS styles on a regular basis

Don’t make changes in all types of attributes in a style, without even testing between changes. Detecting the main cause of minor positioning discrepancies is quite difficult. If you make small amendments and then test positioning, then you will not only evade a black box later, but will explore new more things that you can use in other projects.

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

3. Never use layers exclusively

A ‘layer’ is basically a DIV that is absolutely positioned. In fact, it is quite a bad experience for designers while they create a page layout by using them. In such circumstances you can use a combination of absolute and relative positioning for the DIVs.

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 that contains a site logo, you can position that component first and then place the other relative elements.

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 quite a different position. We can say SuperPreview is a great tool as it easily detects the problems related to the positioning and also corrects them at the same time.

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 dimensions and position for the selected component. By using this box, you can detect how far off positioning is, and such a kind of information can help you while detecting the cause of positioning problems. So, it becomes necessary for you to consider quick position display box in the SuperPreview.

7. Choose your HTML elements deliberately

Being a web designer, you may want to stay away from some of the page elements that renders quite differently in multiple browsers. Well, 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, you will find an internal property, known as hasLayout that is adapted to DOM elements under several conditions. However, you cannot settle this property explicitly, but you can set it implicitly if you know its working procedure. In fact, the positioning problems in IE can be avoided by rendering a particular element layout. You can also decide the value of the hasLayout property for a component by examining the DOM SuperPreview. An element for which hasLayout is true will create orange colored brackets around it. And 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, so if you are viewing your web page in the Internet Explorer in SuperPreview, then you won’t be able to see those orange brackets.

9. You can use the accurate 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. Secondly, fix the width for your Div, and the 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. Well, you can easily match colors in CSS properties by using Expression Web’s color picker and click on the particular color in your graphic, but doing this can be a bad idea. Actually, colors could look slightly different in different browsers, so it could be possible that the color you choose with the color selector might be display differently in browsers.

If you want to avoid this issue, you need to ensure to use accurate color values in your CSS that can 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.

Author Bio: Maggie Sawyer is a creative web developer at MarkupHQ Ltd., a leading PSD to WP conversion company with vast experience in web development & design. She likes to write and share tutorials on WordPress customization services.



Leave a Reply