Fixing Elements in the DIV

Asked

Viewed 2,112 times

2

I’m building an HTML page with some Divs, and inside one of them there is a input and a button. But when I zoom out, the Ivs stay aligned the right way, but the button and the input come out of the div.
How do I make the button and the input follow the div and don’t 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;
}
html css

2 answers

0


I think you just set widths for the elements inside #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’s getting in the way is width of #search. Try putting the width as auto or increase the width. In addition, the margin-left may be pushing the div too far left. Look this example.

  • How do I set the size of a knob and input to CSS? I tried to set <input type="text" name="CODIGOC" MAXLENGTH="13" size="11%" value="" onkeypress="Return Only_n(Event)" /> but continued the same thing, when zooming out it exits the div.

  • Andrey, but this was neither a criticism nor a request. Maybe it’s not the answer he was looking for, but it was a response

  • @Thiago another thing that may be getting in the way is the margin-left, may be pushing the div too far to the left and changing the behavior http://jsfiddle.net/ws60qqev/

0

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

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

Test on Chrome or firefox and use browser developer tools to view 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.