What is causing these two elements to display on separate lines? - html

Question

I have the following button and input that I cannot figure out how to get on the same line.
I've highlighted the div in red. Here is the HTML anbd CSS that's controlling this:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<ul id="country_list_id"></ul>
<button class="btn2 btn2-warning" id="b3">HELP</button>
</div>
.input_container {
display: block;
width:49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
.btn2 {
display: inline-block;
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
display: inline-block;
padding-left: 40px;
width:49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
I've tried using a mix of display: inline and display: inline-block for these various elements but no matter how I cut it I these the HELP button and the INPUT box are never on the same line. What am I doing wrong?

Answer 1

Why? The reason they do not line up is because there is not enough room for all the elements to fit on one line.
Fix Understand what some of your CSS is doing. Your search form's container has the following CSS:
.input_container {
display: block;
width: 49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
which has a number of issues.
No need for display: block; as that's how a DIV displays by default.
width: 49%; will be 49% of it's parent element. i.e. 49% of parent width of 1000px = 490px, 49% of parent width of 500px = 245px
border-size should be border-width
Now onto your INPUT styles:
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
No need for display: inline as that's how a INPUT displays by default.
No need for position: relative as far as I can see.
margin: 0 20% will add a margin to the left and right side of your INPUT of 20% of it's parent element. If parent is 1000px then you're adding 200px of margin on each side of your input! This element alone would take up 690px ( 200px + 290px + 200px ) if the parent element was 1000px.
Now onto your UL styles:
.input_container ul {
display: inline-block;
padding-left: 40px;
width: 49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
Again you're using a percentage width so it will be based off of it's parent element, .input_container. If .input_container is 49% of 1000px parent element then .input_containerhas a 490px width and your UL will be 49% of it's parent width of 490px = ~240px.
Once you get rid of some of those percentage values, especially margin: 0 20% things will clear up a bit though there is a little more work to do.
Both your INPUT and BUTTON elements are inline and therefore will line up next to one another. Place the UL after them both.
Here is a jsFiddle with slightly modified HTML and CSS: http://jsfiddle.net/y475jx8b/2/
I left in some of your percentage widths as this is a demo intended to get you on the right track. You might be better off supplying a specific with depending on the final requirements.
.input_container {
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
height: 42px;
width: 290px;
}
.btn2 {
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
width: 49%;
margin: 0 auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
NOTE I've used jQuery Autocomplete before and I'm not sure you have to supply a UL in the markup. I believe it creates one for you.
EDIT 1 - Reply to OP's question in comments - How to center DIV?
Typically the easiest way to use margin auto along with specifying a width for the containing element. Below is what is most common:
width: 500px; /* can be some other unit like a percentage */
margin: 0 auto;
Above I'm using a shorthand version so I don't have to supply each side separately. 0 is setting the top and bottom margins and auto is setting the left and right margins. 0 is not required to center the element. You could do the following and it would still work, margin: 25px auto; or margin: 100px auto 25px.
When using the auto value for margin you must supply a width for that same element in order for it to center. This is because the browser will calculate your margin for you but it cannot do this if it does not know how much space the element wants to take up. For example, if the containing element (this could be a parent element that may or may not be based on the viewport width of your browser window) is 1000px and your element is 500px wide then it will calculate as follows:
(containing element) - (element width) = (space left for margins) / 2 = (margin width for each side)
so:
1000px - 500px = 500px / 2 = 250px for each side
Without a specified width it would look like this:
1000px - ? = ? / 2 = ? for margin on each side
Percentage widths are fine - let's say width: 30% so 30% of a parent width of 1000px = 300px. That would calculate as follows:
1000px - 300px = 700px / 2 = 350px for margin on each side
Now the catch with a percentage width is that if your containing element is 300px wide then 30% of that which is 90px might be too small. See below on how to handle this.
Now just plug-in a containing element width other than 1000px to get an idea of a variable width space like different browser sizes.
1500px - 500px = 1000px / 2 = 500px for margin on each side
750px - 500px = 250px / 2 = 12px for margin on each side
Now if your elements happen to have set widths, like the INPUT and BUTTON elements, and they total more than the browser width then they will create a horizontal scroll bar. This is where you would want to use a percentage width and (possibly) in conjunction with the max-width property so the element doesn't get too large. If it get's too small you could also use the min-width property as well.
Here is a jsFiddle demonstrating how to do this: http://jsfiddle.net/9gyq89ye/2/

Answer 2

Just change the input position.
Example:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()"> <button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>

Answer 3

Your ul element is too wide (width: 49%). Even as inline-block, it will cause a line break if it wont fit on the current line.

Answer 4

If you want to align two elements next to each other in normal flow you should not be adding other elements in between them.
Also, you've set a static width: 290px for the input which will push the button down when the container is small, it is better to specify the width in %, maybe combined with a min-width (For the container as well).
Also, margin: 0 20%; is just too much, it'll take 40% of the width of container.
.input_container {
display: block; /*..... ? default ....... */
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
position: relative;
display: inline;
width: 80%;
height: 42px;
}
.btn2 {
display: inline-block;
line-height: 1.42857143; /*..... ? ....... */
margin-bottom: 0;
}
.input_container ul {
display: inline-block;
width: 49%;
margin: 0 auto;
padding-left: 40px;
z-index: 1; /*..... ? ....... */
border: 1px solid #eaeaea;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
As a side note, z-index doesn't have any effect on elements in normal flow. Also, you should specify a unit for values other than 0.