Hi,
I have just started learning CSS and was trying to mock the gmail layout. Here is the html and the css code which I wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link rel="stylesheet" href="style.css" type="text/css" />
<head>
<title>Gmail : Mail from Google</title>
</head>
<body>
<div id="container">
<div id="header" >
<img src="img/logo.gif" alt="Google Mail" />
<div id="container-side">
<h3> Welcome to Gmail</h3>
</div>
</div>
</div>
</body>
</html>
CSS - style.css
#container {
background-color: #ffffff;
font-family: Georgia, times-new-roman;
color:black;
text-align:center;
padding:0;
margin:0;
margin-right: 50px;
}
#header {
text-align:left;
}
#container-side
{
background-color:#c3d9ff;
padding-right: 30em;
-moz-border-radius: 0.5em;
float:right;
padding-right: 54em;
-webkit-border-radius: 5px;
}
What I got:
http://img199.imageshack.us/img199/6398/gmailmock.png
Real Gmail :
http://img525.imageshack.us/img525/1687/realgmail.png
as it is clearly visible that the gmail one is much smaller I mean the height…
How do i achieve this… I know it is pretty simple…