Hi Guys/Gals,

I am very new to web designing. I have just started to learn HTML/CSS from youtube and other sources.

I have made a dummy page which i want you guys to comment on and give me corrections on how to write a better code. I am also facing a problem that when i am zooming out from the page, everything is falling apart however in 100% zoom things are fine. SO this are few things that i m requesting you all to comment so that i can learn better coding. The HTML and CSS codes are :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blue Wonder </title>
<link rel="stylesheet" type="text/css" href="homestyle.css" />
</head>
<body>
<div id="container">
<div class="header">
<img src="images/bluesea.jpg" alt="The Blue Sea" />
<h1> Blue Sea </h1>
</div> <!-- end header-->
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Visit</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- end navigation-->
<div class="leftcontent">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet ipsum iaculis, euismod massa id, sagittis nisi. Sed et sapien ante. Cras at scelerisque leo. Donec sollicitudin posuere arcu in dignissim. Nullam sagittis libero eget lacus congue, ut auctor lorem euismod. Integer sagittis, magna cursus volutpat laoreet, neque ipsum aliquet dolor, a elementum sapien sem nec neque. Sed consequat ipsum nec tortor tincidunt hendrerit. Vestibulum euismod, quam id tincidunt varius, lacus nisi tincidunt mi, lobortis facilisis ipsum mi vitae urna.</p>

<p>Sed eu tristique arcu. Proin tempus dolor sed nisi iaculis blandit. In vitae sollicitudin risus, vel pretium diam. Proin in enim ac magna pulvinar lobortis ac eu nulla. Cras tempor nisl non justo dignissim consectetur. Quisque euismod pulvinar felis, eu vehicula purus suscipit in. Etiam quis semper turpis. Maecenas molestie ante eget sodales gravida. Curabitur nulla odio, aliquam dapibus porta at, sollicitudin ultricies ligula. Nulla sed tristique tellus. Aliquam dictum euismod lacinia. Aenean eros nunc, feugiat et leo in, tristique tempus elit. Quisque consectetur dignissim est a pharetra. Cras sagittis arcu et risus malesuada, hendrerit mattis quam aliquet.</p>
</div>
<div class="rightcontent"
<p> Aliquam mattis, dolor vel consectetur scelerisque, justo orci hendrerit mi, vitae dignissim arcu massa ut lectus. Pellentesque sem diam, rhoncus non nulla ut, bibendum interdum tellus. Ut nec ligula rutrum, ornare nulla at, placerat mi. Fusce non velit vel sapien sodales dapibus. Nam libero sapien, semper in consectetur sed, mollis sit amet sapien. Nullam ornare varius nisl in consectetur. Donec feugiat sagittis sapien, lobortis pharetra nisi egestas at. Integer adipiscing in ligula pharetra pharetra. Duis vel justo a nisl venenatis aliquam. Mauris lacinia at risus pretium bibendum. In hendrerit purus dictum augue consectetur, id ultricies eros consectetur. Cras tristique, mi eget viverra sollicitudin, justo odio hendrerit quam, eu tempus tortor tortor a turpis. Praesent sit amet ullamcorper augue, et ornare elit. Nam mollis elit malesuada iaculis molestie.</p>

<p>Sed eu tristique arcu. Proin tempus dolor sed nisi iaculis blandit. In vitae sollicitudin risus, vel pretium diam. Proin in enim ac magna pulvinar lobortis ac eu nulla. Cras tempor nisl non justo dignissim consectetur. Quisque euismod pulvinar felis, eu vehicula purus suscipit in. Etiam quis semper turpis. Maecenas molestie ante eget sodales gravida..</p>
</div> <!-- end content-->
<div class="footer">
<p>The footer &copy;Sudipto</p>
</div>
</div>
</body>
</html>


*
{
margin: 0px;
padding: 0px;
}

body{
background-color: #d08243;
padding-left:10px;
padding-top:20px;
}

#container{
width:920px;
height:630px;
background-color:#ebb284;
margin:0px auto;
}

.header{
background-color:#98b5ec;
color:#082d72;
height:80px;
}
.header h1{
text-align:center;
line-height:80px;
}
.header img{
float:left;
width:100px;
height:50px;
padding:10px;
}

.nav{
font-family:verdana, sans, sans-serif, gerogia;
margin-top:5px;
}

.nav ul{
list-style:none;
}

.nav li{
float:left;

}

.nav li a {
width:219px;
padding:5px;
background-color:#2548bb;
text-align:center;
border-left:1px solid #669aea;
color:white;
display:block;

}

.nav li a:hover{
background-color:#9fbcea;
font-weight:bold;
text-decoration:none;
}
.leftcontent{
font-family:verdana, sans, sans-serif, gerogia;
float:left;
width:450px;
padding:10px;
}

.rightcontent{
font-family:verdana, sans, sans-serif, gerogia;
float:right;
width:420px;
padding:10px;
}

.footer{
clear:both;
background-color:#092cf1;
text-align:center;
color:white;
font-weight:bold;
font-size:1.2em;
height:30px;
}