Why is my submit button going under the input text box when browser window is smaller than it's total width?
Question
Why does my submit button go under the input text field when the browser window is smaller than the total width of the text field and the button itself? See attachment below.
.content { height: auto; margin: auto; overflow: hidden; max-width: 1100px; } .content p { text-align: center; } section { width: 100%; height: auto; margin-top: 80px; background-color: #fff; } section h1 { font-size: 34px; font-weight: 300; text-align: center; margin-bottom: 10px; } .search-sec { height: 147px; margin-top: 0; display: flex; justify-content: center; background-color: #ECEFF1; } .search-sec h1 { padding: 0; font-size: 18px; text-align: left; margin-bottom: 10px; } .content input[type=text] { float: left; outline: none; height: 50px; width: 770px; align-self: center; border: none; padding: 0 0 0 10px; box-sizing: border-box; background-color: white; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .content input[type=submit] { float: right; color: white; height: 50px; width: 100px; border: none; font-size: 14px; text-transform: uppercase; background-color: #4285f4; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .content input[type=submit]:hover { cursor: pointer; background-color: #2a75f3; }
<!DOCTYPE html> <html> <head> <title>Web Hosting</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/css" href="styles/main.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <section class="search-sec"> <div class="content"> <h1>Your perfect domain starts here.</h1> <form> <input type="text" name="domain" placeholder="Search for a domain here."> <input type="submit" value="Search"> </form> </div> </section> </body> </html>
I would like the submit button to stay next to the input text field at all times. if I make the browser windows smaller in width I would like for the input field to decrease in size along with it with the submit button always next to it.
Thank you
1 answers
solution1
0 2016-06-17 19:41:23
One solution would be to set the width of your input to width: calc(100% - 100px);
This will tell constrain your text input to always be 100 pixels less than 100%. That way even when the window changes, your button will always stay to the right.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.