Como eu poderia flutuar essa imagem para a direta sem quebrar a página? nessa imagem, o css está dessa forma:
#centro-distribuicao {
float: right;
width: 550px;
}
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePara o float funcionar corretamente você precisa adicionar uma div com o style clear: both; para não sobrescrever o conteúdo abaixo. Fiz um modelo dá página Sobre Mirror Fashion como exemplo:
<figure id="centro-distribuicao">
<img src="https://s10.postimg.org/9dp0m5s6h/centro_distribuicao.png">
<figcaption>Centro de distribuição da Mirror Fashion</figcaption>
</figure>
<p> Nosso centro de distribuição fica em <a href="#">Jacarezinho, no Paraná</a>. De lá, saem 48 aviões quedistribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:</p>
<p>Compre suas roupas e acessórios na Mirror Fashion. Acesse <a href="#">nossa loja</a> ou entre em <a href="#">contato</a> se tiver dúvidas. Conheça também nossa <a href="#">história</a> e nossos <a href="#">diferenciais</a>.</p>
<div class="clear"></div>
Css:
<style>
.clear {
clear: both;
}
figure {
width: 550px;
text-align: center;
background-color: #F2EDED;
border: 1px solid #ccc;
padding: 12px 12px 10px;
margin-left: 12px;
margin-right: 0;
}
#centro-distribuicao {
float: right;
}
</style>
Veja no exemplo: https://codepen.io/jamillerocha21/full/wWRJYg
Já tentou colocar uma margem nela?
#centro-distribuicao {
float: right;
width: 550px;
margin-left: 10px;
}