0
I have a div with an image, and some information inside it, the image is responsive and increases according to the size of the interface:
<div class="col-sm-12" align="center" style="margin-top:50px; height:20%; max-height:40%; ">
<img src="../img/1.png" class="img-responsive" style="max-height:40%;" />
<table id="table" >
<thead>
<tr>
<td width="22%" align="left"> <a href="#" class="font01" style="margin-left:20%">Cliente</a></li></td>
<td width="20%" align="center"> <a href="#" class="font01" style="margin-left:-50%">Itens</a></li></td>
<td width="20%" align="center"> <a href="#" class="font01">Pagamento</a></li></td>
<td width="20%" align="center"> <a href="#" class="font01">Transporte</a></li></td>
<td width="20%" align="right"> <a href="#" class="font01" style="margin-right:15%">Finalizar</a></li></td>
</tr>
</thead>
</table>
</div>
Knob:
<div id="link-btn">
<a class="btn btn-default" style="width:50%; font-size:11px; position:relative; max-width:50% " aling="center" href="../pages/listarClientes.aspx">Adicionar Cliente</a>
</div>
Problem is that by increasing the screen size, the image goes down and the button goes up , and the button stays inside.
The problem is that the button is on top of the image when resizing and shouldn’t it? It was a bit confusing... This div of the button is where exactly? Inside the other div or outside?
– Rafael Withoeft
stay out, the button is to stay always below.
– War Lock
the problem is exactly what you said.
– War Lock
I’m sorry, but I couldn’t reproduce your problem. You could try creating a demo for this error at: http://www.bootply.com/new or https://jsfiddle.net/ ?
– Rafael Withoeft
I could post the HTML as a whole instead of separated into pieces... so that it is not possible to know how the two passages relate.
– Miguel Angelo
Puts the class
clearfixin father div, I believe it will solve.– claudsan
improved, but if you maximize the entire page, the button is still on top of the image.
– War Lock