Publicado em 24 de mai.

Divs com float ficam em baixo da outra quando diminui o browser

Estou fazendo um site responsivo, coloquei 4 divs do lado da outra e coloquei as imagem para diminuir conforme o browser, só que as divs ficam uma em baixo das outras

Código html:

<div id="barra">

 </div>

 <br />
 <br />
 <br />
 <br />

 <div id="capa">

 </div>

 <div id="estrutura">

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>

 <div class="conteudo_lado_direito">

 <img src="imagens/funcao1.png" alt="img-responsiva" />

 </div>
 </div>

Código CSS:

 #barra{
 width: 100%;
 height: 60px;
 background: #0098E1;
 position: fixed;
}

 #capa{
 width: 100%;
 height: 520px;
 background: #CCC;
 margin: auto;
}

 #estrutura{
 max-width: 1300px;
 width: 100%;
 margin: auto;
}

 .conteudo{
 max-width: 318px;
 width: 100%;
 height: auto;
 float: left;
 margin: 9px 9px 9px 0px;

}
 .conteudo img{
 max-width: 318px;
 width: 100%;
 max-height: 250px;
 min-height: auto;
}

 .conteudo_lado_direito{
 max-width: 318px;
 width: 100%;
 height: auto;
 float: left;
 margin: 9px 0px 9px 0px;
}

 .conteudo_lado_direito img{
 max-width: 318px;
 width: 100%;
 max-height: 250px;
 min-height: auto; }

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

reebr· 24 de mai.

width: 100%
Elas vão ocupar a tela toda, logo, uma será exibida embaixo da outra.

Ederson Dallabrida· 24 de mai.

mude a largura de suas divs para 25% ou menos...

gabriel-costa· 29 de mai.

Olá Gustavo,

Segue abaixo o código modificado e funcionando.

O que devemos fazer é trabalhar com a propriedade do css:

box-sizing: border-box

e modifcar a largura dos elementos .container, além de fazer mais algumas alterações.

Segue o código:

CSS

, :before, *:after {

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body {

	padding-top: 50px;
}

#barra{
	position: fixed;
	width: 100%;
	height: 60px;
	top:0;
	background: #0098E1;
}
#capa{
	width: 100%;
	height: 520px;
	background: #CCC;
	margin: 20px auto 0;
}
#estrutura{
	display: table;
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
}
.conteudo{
	float: left;
	width: 25%;
	padding: 9px 9px 9px 0px;
}

.conteudo:last-child { margin-right:0; }
.conteudo img{

	width: 100%;
	max-height: 250px;
}

HTML

<body>
 <div id="barra">

 </div>

 <div id="capa">

 </div>

 <div id="estrutura">

	<div class="conteudo">

 <img src="http://placehold.it/350x150" alt="img-responsiva" />

	</div>

	<div class="conteudo">

 <img src="http://placehold.it/350x150" alt="img-responsiva" />

	</div>

	<div class="conteudo">

 <img src="http://placehold.it/350x150" alt="img-responsiva" />

	</div>

	<div class="conteudo">

 <img src="http://placehold.it/350x150" alt="img-responsiva" />

	</div>
 </div>

</body>

Qualquer dúvida pode perguntar.

Espero que eu tenha ajudado.

Obrigado.

Vitor RC· 29 de mai.

tenta box-sizing: border-box