My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue?
Just so you know, I'm only on my 4th day of learning CSS and HTML.
.body {
margin: 0 auto;
width: 100%;
clear: both;
}
.mainHeader nav {
background-color: #DC143C;
height: auto;
width: 1264px;
display: inline-block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 0px 0px 0px 0px;
}
.mainHeader nav ul.left {
list-style: none;
display: inline;
position: relative;
float: left
}
.mainHeader div.right {
list-style: none;
display: table-row;
position: relative;
float: right;
margin: 18px 20px 10px 0px;
}
.mainHeader nav ul li {
float: left;
display: inline;
padding-left: 10px
}
.mainHeader div.border {
width: 0px;
height: 50px;
float: left;
border: 1px inset;
color: #DC143C;
margin: 25px 0px 0px 150px;
}<html>
<head>
</head>
<body class="body">
<header class="mainHeader">
<nav>
<ul class="left">
<li>
<a href="#">
<img style="width:150px;height:70px" src="img/1.gif">
</a>
</li>
<li>
<a href="#">
<input type="text" name="search" placeholder="Search..">
</li>
</a>
<li><a href="#"><h2>1</h2></a>
</li>
<li><a href="#"><h2>1</h2></a>
</li>
<li><a href="#"><h2>1</h2></a>
</li>
</ul>
<div class="border">
<ul class="right">
<li><a href="#"><h3> 2</h3></a>
</li>
<li><a href="#"><h3> 2</h3></a>
</li>
<li>
<a href="#">
<img style="width:20px;height:20px" screen="img/16">
</a>
</li>
<!-- bookmark-->
<li>
<a href="#">
<img style="width:20px;height:20px" screen="img/17">
</a>
</li>
<!-- history -->
</nav>
</ul>
</body>
</html>