What could be causing my submit button to shift below the input text box when the browser window is narrower than its overall width?

Can anyone help me figure out why my submit button goes under the input text field when the browser window is smaller than their total width? Here's an attachment for reference: https://i.sstatic.net/Ny4Hq.png

.content {
    height: auto;
    margin: auto;
    overflow: hidden;
    max-width: 1100px;
}
/* CSS code continues... */
<!DOCTYPE html>
<html>
<head>
    <title>Web Hosting</title>
    <meta charset="UTF-8">
    <meta name="description" 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 want the submit button to always stay next to the input text field, even if I resize the browser window. How can I make it so that the input field decreases in size while keeping the submit button next to it?

Thank you!

Answer №1

To ensure your input remains responsive, consider setting its width using the following CSS rule: width: calc(100% - 100px);

By doing this, your text input will always be 100 pixels narrower than the available width, ensuring that it adjusts properly when the window size changes and keeping your button aligned to the right.

Check out this demo for reference: https://jsfiddle.net/7ynetshe/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Bootstrap layout with a fixed top navigation bar, sidebar, and footer

I have a webpage with four components. Top Navigation Sidebar Footer Main content My goal is to have the Top Navigation fixed at the top, the footer fixed at the bottom, and the sidebar to stick to the left with full height. To achieve this layout, I h ...

Creative Vue.js and Tailwind CSS card layout featuring an image extending beyond the boundaries of the card

I'm attempting to design a card where an image pops out of the card. I've tried using z-index, but it doesn't seem to be working as expected. Here is the code I have: <div class="flex flex-col"> <div class=&quo ...

How to line up Font Awesome icons both horizontally and vertically in Bootstrap 4

I am currently facing a challenge with aligning a Font Awesome icon horizontally and vertically within Bootstrap 4. I am aiming to achieve this using only the built-in CSS provided by Bootstrap 4, without the need for any custom CSS. While I have been suc ...

The <li> component is unresponsive when clicked

Is there a way to make this code from http://jsfiddle.net/wfhmtx8c/ work in jsfiddle? #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; opacity: 0.8; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: ...

Links to Help You Find Your Way

I have recently embarked on restructuring a website that currently utilizes frames and framesets. The new structure adopted is a typical structure.html: <body> <div> <div id="headerNavigation"></div> <div id="PageConten ...

Tips for reusing a form within a one-page website

I am looking for a way to handle a form's submit action using JavaScript. My goal is to hide the form when it is submitted and then be able to reuse it later. However, the code I currently have seems to have a hidden state that prevents the submit act ...

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

The issue of Bootstrap modals failing to show content when a button is clicked within the Django Framework

My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button? Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that addit ...

Modify a section of text in iOS by swapping it with a new

In my string, I have the following HTML code - <html> <head> </head> <body> <p>***Some Text***.</p> <p><iframe allowfullscreen="" frameborder="0" height="360" src="//www.some-domain. ...

Align a div vertically in relation to its parent div

Within a parent div, I have child divs whose height ranges from 144px to 318px (min-height and max-height) depending on the window size. I am trying to vertically align all the child divs within the parent. Using line-height doesn't work because the ...

Choose an option within a row of a table

Is there a way to display the div element with the .mynote class when clicking on the input that has an id of title? I attempted the code below, however, it does not seem to be functioning as expected. $("#title").click(function() { $(".mynote").show( ...

Ways to stop a page from refreshing when encountering an error?

I am currently working on a code that is designed to extract user input from a form. I have successfully implemented a JavaScript code to verify whether the fields in the form are filled or not. Everything is functioning correctly, except for one recurring ...

Bring the URL back to its original state upon refreshing the page

A form was created using a combination of HTML and PHP on my website. This specific form takes a number as input, adds 2 to that number, and then displays the result. For instance, if the user enters the number 5 and clicks the submit button, the page wil ...

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...

What is the reason behind the addition of escape characters to the hidden input value?

<body> <div> <?= $_POST['msg'] ?> </div> <form id="frm" method="post"> <input type="hidden" name='msg' value='{"field0": "Im a string", "field1": 84, "field3": "so am I"}' /> < ...

What could be the reason for the text-decoration not functioning as expected in my code?

When I hover over 'list item 2' in my code, the hyperlink is not underlined until then. This behavior is expected and desired. The issue arises when attempting to add multiple hyperlinks to the drop-down links as shown in 'list item 1' ...

Generate a div element dynamically when an option is selected using AngularJS

I'm having trouble dynamically creating div elements based on the selected option value, but for some reason ng-repeat isn't working as expected. Can you help me figure out what I'm missing? Here's the HTML snippet I'm using - &l ...

Substitute for scroll-padding-top in Internet Explorer (For proper scrolling to regions)

Whenever I encounter an issue with a validation summary on a form and click on the corresponding <a href="#error1">Error 1...</a> link for the error, the associated field is scrolled to. However, it is not properly in view because the ...