How to position images within DIV

Navigation
1

I have a div tag and I need some objects to be aligned to the right and others to the left and to be seen at the same height inside the screen.

This is my code: 

<div align="justify">
    <table>
        <tr>
            <td>
                <asp:Image ID="Image2" runat="server" Height="100px" Width="150px" ImageUrl="~/View/Imagen/sca.JPG" Visible="false" />
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Text="Label" Font-Size="190%" ForeColor="Gray" Visible="False"></asp:Label>&nbsp;&nbsp;
            </td>
        </tr>
    </table>
 </div>
<div align="right">
    <table>
        <td>
            <asp:TextBox ID="TextBox1" runat="server" Height="46px" Width="306px" BackColor="#CCCCCC" BorderColor="#666666" Font-Size="20pt" 
                         BorderStyle="Solid" ForeColor="#666666" ToolTip="INGRESE APELLIDO O NOMBRE PARA LA BUSQUEDA"></asp:TextBox>
        </td>
        <td>
            <asp:ImageButton ID="ImageButton1" runat="server" Height="63px" Width="93px" ImageUrl="~/View/Imagen/lupa.JPG" 
                             ToolTip="BUSCAR POR APELLIDO O NOMBRE EN GRUPO SELECCIONADO" BorderWidth="0px" OnClick="ImageButton1_Click" />
        </td>
    </table>
</div>

And this is the image of what I hope to get:

NOTE: The label and the text box must be at the same height.

    
asked by Efrain Mejias C 18.08.2016 в 17:39
source

2 answers

2

Well, you should not use tables to create layouts, I also can not see what the desired behavior is for the image, so by making minor modifications to your code and taking advantage of the flexbox's benefits, this would be the result: 

div {
  border: solid 1px;
  padding: 5px;
}

.container {
  display: flex;
  justify-content: space-between;
}

.container .c-left table,
.container .c-left tbody {
  display: flex;
  flex-direction: column-reverse;
}
<div class="container">
    <div class="c-left">
        <table>
            <tr>  
                <td><img src="http://lorempixel.com/200/200/nature"></td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;etiqueta&nbsp;&nbsp;</td>
            </tr>
        </table>
    </div>
    <div class="c-right">
        <table>
            <td><input type="text"></td>
            <td ><button>boton</button></td>
        </table>
    </div>
</div>
    
answered by 18.08.2016 / 17:53
source
0

Hello I do not know the scope of your project but if this allows you you can use a framework that facilitates your work such as boostrap or materialize.

So excellent to create customizable designs and their grids make the work much easier.

    
answered by 18.08.2016 в 18:05
Access the variables of the activity from its fragment How to always get the last tweet [duplicate]