CSS Floating <Input> Elements in Chrome

[iwato]

BACKGROUND: The same HTML/CSS set-up produces different results in different browsers.  In this case Firefox and Safari agree, but Chrome does not.  I have no idea how the following looks in Internet Explorer. The problem is one of horizontal alignment.  For some reason Chrome forces the second input form control (type='submit') to the following line. Surely I could resolve the problem with Flexbox, but I would like to know what is going on instead.

The HTML

<div id="search_podcast_div">
    <div id='podcast_header'>
        <h1 style='padding-top:1em;'>The Onsite<br />Grammar Captive<br /><span style='font-family:Bradley Hand, cursive;font-size:1.8em;color:#5a4149'>Weekly Podcasts</span><br />Search Engine</h1>
        <form id='podcast_searchform'>
            <fieldset id='podcast_field'>
                <legend>Search and Find</legend>
                <input id='podcast_input' type="text" class='SearchInput' placeholder='Enter keywords and phrases here ...' name='search_podcast_input' required>
                <input id='podcast_submit' type="button" class='SearchButton' value="Search">
            </fieldset><!-- end fieldset#podcast_field -->
            <label id="podcast_input_error" class="error" for="podcast_input">Please enter what interests you. Else, there is nothing to search.</label>
            <p class='Hint'><span class='InlineHeading'>search guide</span>: A phrase surrounded by <em>double</em>-quotation marks<br />returns only those podcasts that contain the exact phrase.</p>
        </form>
    </div><!-- end div#podcast_header -->
    <div id='podcast_matches'>Your matches will display here ...</div><!-- end div#podcast_matches -->			
</div><!-- end #search_podcast_div -->

The CSS

#letter_header h1, #podcast_header h1, #qa_header h1 {
	text-align: left;
}

#letter_searchform, #podcast_searchform, #qa_searchform {
	background: linear-gradient(60deg, #5a4149, #f0efef); /* Standard syntax */
	text-align: center;
	width:auto;
	margin: 2.5em auto 1.5em auto;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

#letter_field, #podcast_field, #qa_field {
	margin-left: 0.5em;
	margin-right: 0.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#letter_field legend, #podcast_field legend, #qa_field legend {
	color: #ffffff;
}

.SearchInput {
	margin: 0em 0.5em 0em 1em;
	width: 80%;
	border-radius: 15%;
}

.SearchInput:focus {
	background: #5a4149;
	color: #ffffff;
	border: 1px solid #ffffff;
}

.SearchButton {
	margin-right: 1em;
	border-radius: 5px;
	color:#5a4149;
}
.SearchButton:hover {
	background-color:#5a4149;
	color:#ffffff;
}

label.error {
		display:block;
/*		clear:both;
		float:right;
*/		color:#fadb9d;
		font-size:0.8em;
		font-weight:bold;
		margin-top:0.5em;
		margin-bottom:0.5em;
}

.Hint {
	font-size: 0.6em;
	color: #ffffff;
	font-weight: bold;
}

.InlineHeading {
	font-variant: small-caps;
}

jsRoddy

You can view the resulting phenomenon by clicking on either Newsletters or Podcasts under the subheading Search Grammar Captive in the navigation bar of the Grammar Captive mainpage.

[Ingolme]

I'm surprised that it's lining up in Firefox at all. You've set the width to 100%, which means you're telling it to be as wide as its container, leaving no horizontal space for the button to stay next to it. The best solution would be to set the width to something like 80% and give the button a complimentary width, maybe around 18% to leave space between the two. The margins will need to be percentages to to make sure the total does not exceed 100%. You will need to apply box-sizing: border-box to these elements to make sure that their borders don't interfere with the width.

[iwato]

It makes no difference whether it is 100%, 80%, or 70%, the result is similar.  I tried these thinking the same.

Roddy

[Ingolme]

I can change the width of the input in Chrome, but it seems the submit button remains below. It's not behaving the usual way, but I just found that the parent element has display: flex. That would explain the unusual behaviour and why 100% width is working in Firefox.

Since form inputs are very tricky to style, I would recommend not making them direct children of a flex object and instead wrapping each one in their own container. The parent element would have "display: flex" as it is now, but the children are now <div> or <span> elements that contain your inputs, you can set the flex property for each of these.

[iwato]

In the end, it was simply better to set the width of the <input type='text' ... > to 75%, eliminate all div elements, as well as the flex box.  The responsive design that worked for Firefox and Safari is now gone, but the appearance is now consistent across all browsers and reasonable responsive format has been achieved.  

In any case, thank you for your suggestion.

Roddy