Prezados,
Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
Ele é um menu de produtos.
Poderiam me ajudar?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style type="text/css">
.container {
border: 1px solid gray;
display: inline-block;
float: right;
margin-right: 150px;
margin-left: 300px;
border-spacing: 5px;
padding: :5px;
}
p {
text-align:center;
}
.menulateral{
background-color:#5F9EA0;
width: 250px;
height: 1000px;
}
ul{
list-style: none;
}
ul li a{
display: block;
font-size: 18px;
font-family: 'Arial';
padding: 10px;
border-bottom: solid 1px #FFFFF0;
color: #ccc;
text-decoration: none;
}
ul li span{
float: right;
padding-right: 10px;
}
ul li a:hover{
background-color: #5b859a;
}
.conteudo{
display: table;
}
</style>
</head>
<body>
<nav class = menulateral>
<ul>
<li><a href="racao-cachorro.html">Ração para Cachorros</a></li>
<li><a href="">Peticos e Ossos</a></li>
<li><a href="">Casas e Tocas</a></li>
<li><a href="">Coleiras</a></li>
<li><a href="">Tapetes e Fraldas</a></li>
<li><a href="">Briquendos</a></li>
<li><a href="">Camas e Cobertores</a></li>
<li><a href="">Portões</a></li>
<li><a href="">Grades</a></li>
</ul>
<ul>
<li><a href="petisco-gato.html">Petiscos para Gatos</a></li>
<li><a href="areia-gato.html">Areia</a></li>
<li><a href="">Beleza e Limpeza</a></li>
<li><a href="">Arranhadores e Brinquedos</a></li>
<li><a href="">Coleiras e Peitorais</a></li>
<li><a href="">Roupas</a></li>
</ul>
<ul>
<li><a href="alimentacao-passaro.html">Alimentacao</a></li>
<li><a href="gaiola-passaro.html">Gaiolas</a></li>
<li><a href="">Puleiro</a></li>
<li><a href="">Acessorios</a></li>
<li><a href="">Farmácia</a></li>
</ul>
<ul>
<li><a href="alimentacao-peixe.html">Alimentacao</a></li>
<li><a href="aquario-peixe.html">Aquários</a></li>
<li><a href="">Decoração</a></li>
</ul>
</nav>
<nav class = "conteudo">
<div class="container">
<img src="imagem/areiagato.png" height="100" width="100" />
<p>This is image 1</p>
</div>
<div class="container">
<img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" />
<p>This is image 2</p>
</div>
<div class="container">
<img src="imagem/quatree.png" height="100" width="100" />
<p>This is image 3</p>
</div>
<div class="container">
<img src="imagem/areiagato.png" height="100" width="100" />
<p>This is image 1</p>
</div>
<div class="container">
<img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" />
<p>This is image 2</p>
</div>
<div class="container">
<img src="imagem/quatree.png" height="100" width="100" />
<p>This is image 3</p>
</div>
<div class="container">
<img src="imagem/areiagato.png" height="100" width="100" />
<p>This is image 1</p>
</div>
<div class="container">
<img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" />
<p>This is image 2</p>
</div>
<div class="container">
<img src="imagem/quatree.png" height="100" width="100" />
<p>This is image 3</p>
</div>
</div>
</nav>
</body>
</html>
