Introduction to DIV based layout


If we go back ten years back into 1990s and start of 2000 the number of people connected with Internet to fulfill their various needs are very limited and it was mostly used by rich. But in the present day more and more people are gathering around the Internet in their daily activities and for most of them spending at least few minutes has being a part of their daily life. Due to its very powerful social networking capability it has made our lives more dynamic and exciting. So it is very important for people who involve in the process of evolving this infrastructure to make use of the accepted standards in all of their development efforts because this greatly benefits all kind of users with varying accessibility issues to achieve maximum satisfaction with less trouble.

In the earlier days of the Internet web sites were developed mainly based on table structure and this method was very popular among everybody. With the effort of numerous industry experts proper standards were defined to give the user a better user experience. As a result HTML and XHTML got evolved over the years to organized the content ( HTML 5 standard will be the future of web ) for representing the content and the CSS is there to control the look and feel (presentation) of the web page. In this article I’m going to share some resources that will be helpful for web developers.

Favicon

This is the small icon that is getting displayed on the address bar of your web browser just before the place where you type the URL which you want to visit or on the left most corner of the browser window tab. It’s it highly encouraged to include this feature into the site during the development phase. There are plenty of freely available services to have your favicon generated out of any popular image formats like png, jpg, gif, bmp, etc…

Introduction

I have seen that still the people use table based structure to handle the overall layout. In most cases they have adapted this approach to overcome the layout issues encountered with IE. It is very important to understand the importance in use of CSS to control the overall as well as element level layout. This gives a grater advantage to the web application in many ways, such as cleaner and structured layout, saves loading time, easier organization, wider accessibility, etc… If you are new to this following are some of the useful sites worth going through.

DIV based layouts

When you first received the site design it’s very important identify the correct layout for the site.

  • Tow columns with a sidebar on left or right
  • Three columns with sidebars on either side
  • Three columns with sidebars either on left or right, etc…

Once this is clearly identified next step is to properly organized it on your HTML page using div elements rather than going for table elements.. For example if the design is a three column layout having the sidebars on either sides of the content with a header and footer, this can be very easily organized as follows:


#wrapper- { width: 450px; margin: 0 auto; }
#header-,
#footer-,
#content-wrapper- { float: left; width: 440px; margin:5px; display: block; clear: both; }
#sidebar-left-,
#sidebar-right- { float: left; width: 90px; height: 250px; }
#content- { float: left; width: 250px; height: 250px; }

<div id="wrapper-">

<div id="header-"> header  </div>

<div id="content-wrapper-">
<div id="sidebar-left-"> sidebar left </div>
<div id="content-"> content </div>
<div id="sidebar-right-"> sidebar right </div>
</div>

<div id="footer-"> footer </div>
</div>

header
sidebar left
content
sidebar right
footer

Please don’t consider this as a complete example. I just provided this as a starting guide. Following points are very important when you are into serious work.

  • Reset the oveall HTML elements to a default styling settings.
    This step helps your to reset the HTML element’s properties to know and a standard configuration overriding the properties applied by different web browsers.

    are few examples to start with.

  • Apply HTML element level styling
    Start applying the element level styling. Doing so you’ll be able to maintain a consistency throughout the site.
  • Apply the overall site layout styling as shown above
  • Lastly apply the section level styling

Jason Bartholme has taken the trouble to share some awesome CSS resources. :-)

About these ads

7 Comments

  1. August 5, 2012 at 6:36 am

    […] 5, 2012 at 6:36 am (CSS, FOSS, HTML, Javascript, Life, Web) About two year back I worte an article introducing a simple HTML structure to organize the content on the web page as shown […]

  2. Ransara said,

    August 22, 2012 at 4:13 am

    Good article to start web dev. properly.
    Keep up the good work machan…

  3. August 10, 2013 at 5:24 pm

    It is not my first time to pay a visit this web site, i am browsing this web site dailly and take nice data from here everyday.

  4. January 2, 2014 at 10:53 pm

    Hello There. I discovered your weblog using msn.
    That is a really well written article. I
    will make sure to bookmark it and return to read more of your
    helpful information. Thank you for the post.
    I will definitely return.

  5. May 31, 2014 at 6:17 am

    wonderful points altogether, you just gained a new reader.
    What would you suggest in regards to your post
    that you made some days ago? Any positive?

  6. September 21, 2014 at 12:48 pm

    hi!,I love your writing very so much! percentage we keep up a
    correspondence more approximately your article on AOL?
    I need an expert on this space to unravel my problem.
    Maybe that is you! Having a look ahead to see you.

  7. October 2, 2014 at 5:18 am

    Thanks for another excellent article. Where else could
    anyone get that kind of info in such a perfect way of writing?
    I have a presentation next week, and I’m on the look for such info.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,052 other followers

%d bloggers like this: