CSS Doubt reducing height of div

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…

Seems you got the default margin/padding blues: zero them out:

* {margin:0; padding:0;}

then adjust to your liking with setting the appropriate padding top and bottom on #container-side

Does this help?

Hi, as Luki alluded to, your <h3> has a default top/bottom margin and as such it is stretching the blue box out. Setting the <h3> margin to 0 will do the trick (or you could use a reset as he posted)

h3{margin:0;}

I would just nipp it in the b*** and prevent some future problems with a reset :wink:

The reset would be preferable but I felt the need to explain what exactly was going on instead of him just using a reset and being done with it :).

Yup… that did the trick :slight_smile:

Thanks Luki_be
thanks RyanReese for explaining the reason :slight_smile:

Lessons learned:

Always reset the padding and margins.

Yes :). If you are going to use forms then I recommend you don’t use the *{margin:0;padding:0;} way, but rather use a minimalized version of Eric Meyers reset :slight_smile:

Lol, that wasn’t why i replied buddy, just wanted to add that the reset will prevent future problems since you already explained the H problem :wink:

You replied first :slight_smile:

Correction: my reply after yours lol