How do I eliminate the empty space between the header and wrapper div elements?
Check out this DEMO fiddle. Below is the HTML code:
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="login">
<h3>
CLIENT LOGIN</h3>
Username
<input type='text' name='username' id='username'>
<input type='button' name='login' value='Login' id='btnLogin'>
<br />
Password:
<input type='password' name='password' id='password'>
<input type='button' name='register' value='Register' id='btnRegister'>
</div>
<div id="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Seminar</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="contents">
<div id="welcome">
<h3>
Welcome to Somara</h3>
<p>
It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout.</p>
<p>
There are many variations of passages of Lorem Ipsum available.</p>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
Here is the CSS code:
body
{
width:100%;
margin:0px;
}
#header
{
width: 100%;
background-color: #2c2520;
min-height: 200px;
}
#login
{
float: right;
color: white;
}
#logo
{
background-image: url('../img/logo.png');
min-height: 191px;
min-width: 230px;
float: left;
background-repeat: no-repeat;
}
#navigation
{
padding-top: 158px;
margin-right: -200px;
float: right;
}
#navigation li
{
display: inline;
min-width: 100px;
padding: 5px 5px 5px 5px;
}
#navigation a
{
text-decoration: none;
font-family: Tahoma, calibri;
font-size: 15px;
color: #f8f8f8;
}
.active
{
background-color: #afaba5;
color: black;
}
.inactive
{
color: white;
background-color: #392f2b;
}
#contents
{
width: 950px;
margin: 0px;
min-height: 700px;
}
#wrapper
{
width: 100%;
margin: 0 auto;
background-color: #39302b;
}
#intro1
{
min-width: 30%;
max-width: 35%;
min-height: 250px;
float: left;
padding: 10px;
padding-right: 50px;
padding-left: 50px;
color: #cdcdcd;
}
#welcome
{
}
#welcome h3, p
{
font-family: Myriad Pro;
color: white;
text-align: center;
font-weight: normal;
}
#welcome p
{
color: #cdcdcd;
font-size: 20px;
}