Website Layout By Div Tag

Website Layout:

Layout means the system of anything. For that web page layout is very important for designing a web site. At least all website put their content into multiple columns.  This columns are created by <div> tag of <table> tag. CSS are used for designing the web page.

Making html website layout using <div> tag:

If You have learnt about html <div> tag properly now its time for you to learn how to make layout using <div>  tag . If you don’t know about html <div> tag you can read Html Div And Html Span Element article for details about <div> tag.

Example:

<html>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#cccc00;">

<h1 style="margin-bottom:0;">Your title of page</h1></div>

<div id="menu" style="background-color:#def54e;height:200px;width:100px;float:right;">

<div id="text"><b><a href="http://h2cweb.net">HOME</a></b><br>

<a href="http://h2cweb.net/html/">HTML</a><br>

<a href="http://h2cweb.net/css/">CSS</a><br>

<a href="http://h2cweb.net/wordpress/">wordpress</a></div>

<div id="content" style="background-color:#cc9999;height:200px;width:400px;float:left;">

Your contant of website </div>

<div id="footer" style="background-color:#3366cc;clear:both;text-align:center;">

Copyright © h2cweb.net</div>

</div>

</body>

</html>

Output:

website layout by div

website layout by div

Description: In this website layout I have just use html div tag and style property. There is no use of css. I have used <div id=”container” style=”width:500px”> ,it indicates the width of website. You can use height also.

 <div id=”header” style=”background-color:#cccc00;”>

indicates the head of website. You can use your logo here.

<h1 style=”margin-bottom:0;”>Your title of page</h1></div>This indicate the title of your website. margin-bottom:0 output the space of margin with your head. If you use any number without 0 it will display space with header. It always output in pixel.

<div id=”menu”> defines the menu style of the website. Style attribute defined the style and position of the menu list.

<div id=”content”> indicate the body of website. As you want you can describe it or design it via CSS  .

<div id=”footer”> footer is very necessary for any website. It contains the devloper name and other thing like designer and copyright.

All time you can’t work with this <div> tag. At the time of E-mail template designing you must need to depend on <table> tag for design.  You can learn how to make website layout by table tag after reading website layout by table tag article.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.