Check out this snippet of my html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>European Networking</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="container"></header>
<div id="main">
<header id="header">
<section id="logo"><img src="images/logo.png" /></section>
<section id="search">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<select class="s1"> <option>All Categories</option>
<option>WOMEN'S ATHLETIC WEAR</option>
<option>WOMEN'S SOCKS</option>
<option>WOMEN'S UNDERWEAR/BOXERS</option>
<option>WOMEN'S PAJAMAS/HOME ATTIRE</option>
<option>WOMEN'S LEGGINGS</option>
</select>
</td>
<td>
<input type="text" class="t1" />
</td>
<td>
<input type="button" class="b1" />
</td>
</tr>
</table>
</section>
</header>
<nav id="lnav"></nav>
<nav id="mnav"> </nav>
</div>
<footer id="foot">
</footer>
</body>
</html>
This is the CSS used:
body{
margin: 0px; padding: 0px;
background-color: #eceeed;
font-family: Segoe UI, Arial, Helvetica, sans-serif;
color: #4e5452;
}
.t1 {
font-family:inherit;
margin-left:3px;
padding-left:5px;
height: 30px;
width: 260px;
border: 0px;
border-left: 1px solid rgba(255, 0, 0, .1);
outline:0px;
}
.s1 {
font-family:inherit;
margin-left: 2px;
height: 40px;
width: 190px;
border: 0 !important;
-webkit-appearance: none;
-moz-appearance: none;
background: url('../images/select.png') no-repeat;
background-position: 170px 12px;
width: 190px;
text-indent: 0.01px;
text-overflow: "";
}
.b1{
border:0px;
width:40px;
height:40px;
background-image: url(../images/search-button.jpg);
}
#container {
background-image: url(../images/bg-horizonal-bar.jpg);
background-repeat: repeat-x;
height: 60px;
width: auto;
}
#header {
height:140px;
width: 1000px auto;
clear:both;
}
#logo{
float:left;
}
#search{
width:500px;
height:40px;
margin-top:50px;
float:right;
background-color:#fff;
overflow:hidden;
border: solid 1px #E5E5E5;
outline: 0;
background: -webkit-gradient(linear, left top, left 2, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 2px);
box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
#main{
width:1000px;
margin: 0px auto 0px auto;
}
#lnav{
width:200px;
height:45px;
background-color:#000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
}
#mnav{
margin-left:10px;
height:45px;
width: 790px;
background-color:#000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
}
The issue is with aligning the nav items horizontally, I've attempted various methods such as using float left and right without success. I also tried adding clear codes and changing "nav" to "div". Do you think it's an HTML or CSS problem? What additional CSS code should be applied to lnav and mnav for proper alignment?
I would appreciate any assistance. Thank you.