Hi all,
I´m all new here, and full of questions : ) I´m trying to create a site using liquid layout with CSS, but as it runs i found some problems right at the start. I´m trying to create a Navigation bar inside the #top <div> But it creates extra space (even when I insert padding or margin 0 if that helps) also the text do not align within the borders in the lists. I guess I´m not explaining it the right way. Though the code is right bellow so you all can check it. I hope I can get help for it.

Thanks all.

----------------------------------------------------------------------------
<html>
<head>
<title>Three Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

<!-- The text-align: center; is used to prevent the following browsers from not centering the containing blocks: * NN4 (Mac and Win) * Win/IE4 * Win/IE5 * Win/IE5.5 * Win/IE6 (when in quirks-mode) using this will only take effect in those browser, the CSS code will overall it in browsers tha support the code -->
body { text-align: center; }

<!-- Entire Page (Container) -->
#container {
width: 90%;
margin: 10px auto;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%; }
<!-- Heading (Cabeçalho) -->
#top {
background-image: url("assets/img1.gif");
background-position: top right;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 2.2em;
background-color: #ddd;
border-bottom: 1px solid gray; }

<!-- Exemplo de "Descendant Selector" -->
#top h1 {
font-family: Tahoma, Arial, sans-serif;

padding: 0;
margin: 0; }


<!-- Leftnav (Navegação da Esquerda -->
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em; }

<!-- Rightnav (Navegação da Direita) -->
#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em; }

<!-- Content (Corpo - Coluna Principal) -->
<!-- The max-width: 36em, sets the maximum width on the main content. Although IE browsers will ignore the rule, the other standard compliant browsers will not alow the content area to go wider than the width you specify. -->
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em; }

<!-- Footer (Rodapé) -->
<!-- The clear: both; command will force the footer below any floated elements above. -->
#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray; }

<!-- To remove the space above content in the "lefnav", "rightnav" and "content" -->
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

<!-- Este id serve para alinha os campos de preenchimento de acordo com o gráfico, assim como customizar os campos -->
#campo1 input {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000;
background color: #fff;
border: 1px solid gray; }

#campo1 {
font-family: Tahoma, Arial, sans-serif;
font size: 12px;
color: #000;
float: right;
margin-right: 5em; }

<!-- Navbar (Barra de Navegação) -->
#navbar ul li {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000;
list-style-type: none;
border: 1px solid gray;
text-align: center;
display: inline;
margin: 0;
padding: 0; }

<!-- Este comando serve para esconder as sublistas que serão mostradas apenas com o rollover -->
#navbar li ul {
display: none; }

#navbar {
padding: .8em;
}

</style>

</head>

<body>
<div id="container">
<div id="top">
<h1>Wiz Systems do Brasil</h1>
<div id="campo1">Intranet - Usernameinput type="text" name="user"> Senhainput type="password" name="Senha"></div>
<div id="navbar" align="center">
<ul>
<li>A Empresa
<li>SIGEM</li>
<ul>
<li>Sigem Protocolo
<li>Sigem Finanças</li>
<li>Sigem Legislativo</li>
<li>Sigem Tributação</li>
<li>Sigem Saúde</li>

</ul>
<li>JGRADE</li>
<li>Downloads</li>
<li>Contato</li>
<li>Página Principal</li>

</ul>
</div>
</div>

<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>