Button fora de posicao

[Madk 0]

Bom, estou tentando por a TAG button do "PEDIR"  logo abaixo do PREÇO, mas ele nao esta ficando como se estivesse dentro da div onde o botei, so e movido por fora.

Ele nao esta ficando em cima da Imagem. A div tem o tamanho e largura os mesmos que a Imagem, ja usei o float, botei a margin-top etc.. (esses margins 0, botei para testar, ver se ficaria no topo da imagem).

Como posso deixar ele em baixo do preço. 

<div id="pizza1">
<a href="#"><img src="images/piz1.png"/></a>
<button>PEDIR</button>
</div>

#pizza1 {
	height: 268px;
	width: 578px;
	background-color: white;
	margin-left:35px;

}
#pizza1 button{
    float: auto;
    margin-top: 0px;
    margin-right: 0px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;

}

 

[Maujor 144]

@Madk

Não existe o valor auto para a propriedade float.
Declare: float: right;

[Madk 0]

Eu consegui fazer mas foi dessa forma  abaixo, tive que usar valor negativo no margin-top para o button ficar dentro da class e em cima da imagem, parece uma gambiarra  rsrsrs.

<div class="conteudo">
<div class="pizza1">
<a href="#"><img src="images/piz1.png"/></a>
<a href="#"><button>PEDIR</button></a>
</div>
<div class="pizza2">
<a href="#"><img src="images/piz2.png"/></a>
<a href="#"><button>PEDIR</button></a>
</div>
</div>

.conteudo {
    display: table;
}

.pizza1 {
    display: table-cell;
	height: 268px;
	width: 578px;
	background-color: white;
	margin-left:35px;
    float: left;

}
.pizza1 button{
    margin-top: -53px;
    margin-left: 375px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;

}

.pizza2 {	
  height: 268px;
  width: 578px;
  display: table-cell;
  margin-left: 100px;
  float: left;
}
.pizza2 button{
    width: 203px;
    margin-top: -53px;
    margin-left: 375px;
    background-color: green;
    width: 203px;
    height: 53px;
    font-family: sans-serif;
}

Ficou assim:

[Madk 0]

Esqueci de mencionar que o site buga todo quando esta em resolução menor.

[Omar~ 87]

@Madk Um dica que dou não só a você, mas a qualquer pessoa que vá fazer um layout, é não enxergar a página com ela é visivelmente, e sim um aglomerado de blocos, que esses mesmos blocos podem ser divididos em outros blocos e assim sucessivamente.

 

No mais simples, antes de você ver uma imagem, um button aqui ou ali numa página tente ver ela como um todo, sem o visual, e sim como ela é dividida. Na real seria como ver a página como uma página de história em quadrinho onde cada quadro compõe o conteúdo onde está e todos quadros juntos formam a página.

 

Um jeito fácil de entender como isso é na real, use a ferramenta de inspeção do navegador (Ctrl + Shift + I), note como o navegador interpreta dos elementos... todos como blocos dentro de outro bloco etc... e não como o conteúdo visível aos seus olhos...

 

Tendo isso em mente, e com nem que seja um pouquinho de conhecimentos das propriedades usadas no css, qualquer um pode posicionar elementos com a maior facilidade.

 

Fiz um exemplo com layout responsivo baseado no que você apresentou, só não coloquei as imagens porque eu não tenho elas né. Mas terá que adapta-las conforme a necessidade.

Exemplo online aqui: https://jsfiddle.net/

 

[Maujor 144]

@Madk

Uma maneira consistente de posicionar o botão sobre a imagem é usar position: absolute;
Para não desconfigurar use técnicas de design responsivo.
Estude a solução que criei em https://jsfiddle.net/maujor/e9kx6svc/ . Redimensione a janela do navegador e observe.

Adapte para suas dimensões.