Secure Elements in DIV

2

I am putting together an HTML page with some divs, and within one of them there is a input and a button . But when I zoom out, the divs stay aligned the right way, but the button and input leave the div.
How do I make the button and input track the div and do not jump out?

<div id="search">
            <form action="../php/CONSULTA.php" id="consulta" name="consulta" onsubmit="return validateFormC()" method="GET">
                    <b>Código para Consulta:</b>
                    <input type="text" name="CODIGOC" MAXLENGTH="13" size="11" value="" onkeypress="return Only_N(event)" />
                    <button type="submit" id="consulta" class="btnCons">CONSULTAR</button>
            </form>
        </div>

CSS

#search{
    position:relative;
    margin-top:3px;
    margin-left:67%;
    border:solid black 1px;
    width:356px;
    height:25px;
}
    
asked by anonymous 22.08.2014 / 14:40

2 answers

0

I think you just need to set widths for the elements within #search with % . You have to put the code inside a CSS script, but it's best to put it in a separate file. An example:

<style type="text/css">
    #search input {width:20%;}
    .btnCons {width:20%;}
</style>

And what has got in the way is width of #search . Try putting width as auto or increase width. Also,% w / w% may be pushing the div far to the left. Look this example .

    
22.08.2014 / 15:00
0

In this case the width of the div search can not be greater than 32%, since the div is 67% to the left (67% + 32 = 99%). Also remove the input size. Set the font size of the search div to font-size: 16px (or any other value). Put the form in zeros:

form{
margin :0;
padding:0;
width:auto;
}

Test in chrome or firefox and use the developer tools of browsers to see the layout. Make changes and test.

<input type="text" name="CODIGOC" MAXLENGTH="13" value="" onkeypress="return Only_N(event)" />
<button type="submit" id="consulta" class="btnCons">CONSULTAR</button>
    
22.08.2014 / 16:12