CODEWITHSUNDEEP
htmlcss
Hussain Khalil
Hussain Khalil

Reputation: 1650

How to prevent wrapping of button in div

On a search page, there is a text input with a submit button to the right. When zooming in, the submit button actually goes on top of the search bar, because there is no room. Is there any way I can prevent the button from moving when it is out of room?

HTML

<input type="text">
<input type="submit">

Upvotes: 1

Views: 4822

Answers (2)

W.D.
W.D.

Reputation: 1041

You just have to wrap your input elements inside a wrapper and give it fixed width.

Take a look at the example => DEMO

HTML

<!--This is the wrapper element-->
<div class='wrapper'>
<input type="text">
<input type="submit">
</div>

CSS

.wrapper{
    width:200px; /*fixed width, so if the window is resized (zoomed in/out), it won't break*/
    height:40px;    
}

.wrapper input[type="text"]{
    width:100px;
    height:inherit;
    border:1px solid red;    
}

.wrapper input[type="submit"]{
    width:90px;
    height:inherit;
    border:1px solid brown;    
}

Upvotes: 1

Mohammad Naji
Mohammad Naji

Reputation: 5442

While it's hard to answer without the code, but hope it helps:

<table>
    <tr>
        <td><input type="text" name="query"></td>
        <td><input type="submit"></td>
    </tr>
</table>

Not so nice and I don't like it myself, but it works in any situation.

Upvotes: 1

Related Questions