Tuesday, April 9, 2013

Working with HTML DIV to create layout

Create a html page as below:

<html>
<head></head>
<body>

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

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">This Is The Header</h1>
</div>

<div id="menu1" style="width:100;height:200; background-color:#FFD700;float:left;text-align:center">
<b>Menu1</br>
Menu2</br>
Menu3</b>
</div>

<div id="menu2" style="width:100;height:200;background-color:#FFD777;float:right;text-align:center;">
<b>Menu1</br>
Menu2</br>
Menu3</b>
</div>

<div id="container" style="background-color:#EEEEEE; width:400;height:200;">
INSERT WEB PAGE CONTENTS HERE ...... .... ...... ...............
</div>

<div id="footer" style="clear:both;background-color:#FFA500;text-align:center">
© your domain
</div>


</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------
Output:

No comments:

Post a Comment