How do I keep my input fields on one line while centering the DIV that contains them?

How do I keep my input fields on one line while centering the DIV that contains them?

I gave this CSS class to some input fields

.searchField {      display: inline-block;  }  

This is their underlying HTML ...

  Search For Results
   
                          
 
  

However, despite the fact that there is enough horizontal screen real estate, one of them keeps wrapping to teh next line, as this Fiddle illustrates -- https://jsfiddle.net/3mwn14fk/ . How do I keep these items on one line (assuming there is enough browser width)? Note I also want to keep the DIV they are within vertically and horizontally centered.

Edit: This is what I see in the Fiddle. This is on Firefox. Note the text fields are not on one line.

Edit 2

Per Monica's Fiddle, this is what I see. Note that the first naem and last name are on one line, but the event text box is on the next line. I would like all three to be on the same line, even if the black box containing them has to expand

Answer by shariqkhan for How do I keep my input fields on one line while centering the DIV that contains them?

You have to specify the width too. Make hese changes to "searchField" class:

.searchField {      display: inline-block;      width:33%;      box-sizing:border-box;      float:left;  }  

Here is the JSfiddle

Answer by Monica for How do I keep my input fields on one line while centering the DIV that contains them?

use table and table -cell instead inline-block

  #loginArea {      border-radius: 25px;      font-family: 'russo_oneregular';      font-size: 20px;      padding: 20px;      background-color: #000000;      color: #ffffff;      display: table;      position: absolute;      top: 50%;     left: 50%;     transform: translateX(-50%) translateY(-50%);    }   .searchField {       display: table-cell;       float:left;       margin :0px 2px 0px;    }  

it works have a look http://jsfiddle.net/3mwn14fk/4/

Answer by Navnit for How do I keep my input fields on one line while centering the DIV that contains them?

If you want to keep one input box bigger and other two have same width then change the class of the input box for which you want to add the width to "searchField1".

And add the following styles

#loginArea {  border-radius: 25px;  font-family: 'russo_oneregular';  font-size: 20px;  padding: 20px;  background-color: #000000;  color: #ffffff;  display: inline-block;  position: absolute;  top: 50%;  left: 50%;  transform: translateX(-50%) translateY(-50%);  text-align: center;  }    .searchField {  display: inline-block;  width: calc(50% - 100px);  box-sizing:border-box;  float:left;  }    .searchField1 {  display: inline-block;  width: 200px;  box-sizing:border-box;  float:left;  }  

If you want to specify width for all input boxes this will still work but dont forget to add a
tag just before the image input so that it is placed in the next line

 .searchField {   display: inline-block;   width: 100px; // add your width here   box-sizing:border-box;   float:left;   }     .search_button{   clear:both;   }  

I hope this helps,

Answer by Angela Amarapala for How do I keep my input fields on one line while centering the DIV that contains them?

You have to insert a div inside the form so that, all the three text fields should be enclosed within that div tag. Now set the style of that div to:

    display:inline-flex;  

make sure this style overwrites the default display:block of your newly added div tag. Your code should look like this:

    
          
Search For Results
               
                                    
                                                                                    
                                
          
      
  

If you also want to place your search icon in the same line, then you don't have to insert the new div tag. Instead, set the style of the form to:

     display:inline-flex;  

Then everything will get aligned in the same line. Hopefully, this will work out.

Answer by Muhammad Usman for How do I keep my input fields on one line while centering the DIV that contains them?

Use inline-block for children with white-space: nowrap on parent. It will prevent children from wrapping in next line.

Note: Please see snippet in full page mode.

#loginArea {    white-space: nowrap;    border-radius: 25px;    font-family: 'russo_oneregular';    font-size: 20px;    padding: 20px;    background-color: #000000;    color: #ffffff;    display: inline-block;    position: absolute;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-50%);  }    .searchField {    display: inline-block;    vertical-align: top;  }

    
      Search For Results
       
                                      
    
  

Answer by thepio for How do I keep my input fields on one line while centering the DIV that contains them?

Just to give you an alternative you could use flexbox to achieve what you want. Here's a quick demo:

/* Just some basic CSS declarations to start with */    * {    box-sizing: border-box;  }    html,  body {    margin: 0;    min-width: 100%;    min-height: 100%;  }    h4 {    margin: 5px 0; /* Just to make the demo look nicer */  }    #loginArea {    border-radius: 25px;    font-family: 'russo_oneregular';    font-size: 20px;    padding: 20px;    background-color: #CCCCCC;    color: #ffffff;    position: absolute;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-50%);    display: block;    width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */  }    #search-form {    position: relative;    display: flex;    align-items: center; /* Not necessary but will center the items */    flex-direction: row; /* Not necessary but tells that they should be in a row */    justify-content: flex-start; /* Will align items to left on larger screens */    flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */  }    #search-form > * { /* You could give a class or element instead of asterix */    margin: 0 10px 5px 0; /* Just to make it look nices */    width: 25%; /* Width of text inputs, you could set them different from each other */    min-width: 100px; /* Min width to wrap elements when small screen */    flex: 1;  }    #search-form .search_button {    max-height: 20px;    flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */    min-width: 0px; /* Do not use the min-width declared above */    margin: 0 0 5px 0;  }

    
      
        Search For Results      
      
                                              
    
  

I set the login area to a width of 80% but you can alter this in any way you want of course. I set also the min-width of the inputs to 100 pixels - except for the last one - so that it will wrap nicely on smaller screens. I also set the max-width for the inputs so they will not grow infinitely and the search forms justify-content: flex-start; will align them to left on bigger screens.

Also the support for flexbox on browsers can be improved with setting prefixes like -webkit- and -ms- etc to the CSS declarations.

JSFiddle to play around with

Browser support for flexbox

Answer by Jonathan Slattery for How do I keep my input fields on one line while centering the DIV that contains them?

There are several ways to achieve this, with varying degrees of success, depending on the method used:

@Muhammad's option of using display: inline-block; on the inputs and forcing the container to ignore text-wrapping with white-space: no-wrap; does work to acheive your goal of forcing everything on one line;

However, it's a limited solution in that your elements will be whatever default size dictated by the browser and because the containers will be over-sized and out of position on some devices/resolutions/window sizes, etc. (ultimately, the user experience wasn't addressed)

The Flex-box CSS implementation is also another way to go, and browser implementation is getting much closer to the point that it'll be the solid option in the future, and yes, it can be fairly-well implemented in many browsers with certain CSS fallback and/or Javascript Shims (perhaps provided by a framework, etc), but assuming you want bullet-proof coverage that just works, use a little math to calculate some percentage widths, use floats, and add a dash of media queries to achieve your objective:

Here's the CSS and notes to do this, below,

and Here's the Fiddle to try it out. (I've set the container color to change with the breakpoints, so try resizing your window.)

/* Control the box-model: (makes assigned widths predictable) */  * { box-sizing: border-box; }    #loginArea {      border-radius: 25px;      font-family: 'russo_oneregular';      font-size: 20px;      padding: 20px;      background-color: #000000;      color: #ffffff;      position: absolute;      top: 50%;      left: 50%;      transform: translateX(-50%) translateY(-50%);  }    /* Default Styles (at full width)     Assign calculable sizes to the form fields:     We have 3 fields (1 double-sized) and a button:     So, 1+1+2+1 = 5; Dividing 100% container-width by 5 = 100/5 = 20%;     we need spacing between (think margin-right),     so, shave each element down 1% and set the margin-right to 1%;     then specifically set the double-width entry separately (40% = 39% + 1%)  */   #searchForm input {     float: left;     width: 19%;     margin: .25em 1% .25em 0;  }  #searchForm input#my_object {     width: 39%;  }    /* Applying Media Queries to give friendlier form layouts     by using alternative field sizes for better user experience     at different break-point sizes (indicated by varying background color */    /* Mobile Styles */  @media only screen and (max-width : 480px) {     #loginArea {background-color:red;}       /*Full-width, no margin, stacked; */     #searchForm input {       width: 100%;       margin-right: 0;     }     #searchForm input#my_object {       width: 100%;     }    }    /* Phablet (In-between-sized mobile styles)     -- in this case, same as mobile for consistency)  */  @media only screen and (min-width : 481px) and (max-width : 767px) {     #loginArea {background-color:yellow;}       /*Full-width, no margin, stacked; */     #searchForm input {       width: 100%;       margin-right: 0;     }     #searchForm input#my_object {        width: 100%;     }  }    /* Tablet Styles */  @media only screen and (min-width : 768px) and (max-width : 1024px) {     #loginArea {background-color:green;}       /* Name side-by-side, Event stacked full-width below;        (Using 1% padding on both left and right, to keep things balanced)     */     #searchForm input {        width: 48%;        margin: .25em 1%;     }     #searchForm input#my_object {        width: 98%;     }  }  

Answer by Chirag Dave for How do I keep my input fields on one line while centering the DIV that contains them?

  
     Search For Results
     
                                  
   
  
  

Now, you can write Css as,

.main-container {display:block; text-align:center; }  #searchForm { display:inline-block; }  #searchForm form input { float:left; margin-right:5px; width:100px;}  

Answer by HannibalLettuce for How do I keep my input fields on one line while centering the DIV that contains them?

Google CSS reset and read about it.

You should read up on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Use media queries to edit the style for different screen sizes/devices.

Here is how I would've done it with your code

Using your HTML code with some small edits:

      
          Search For Results
           
                                                                                
      
  
  

• Removed the size attribute from the event field.
• Changed the class on the event field to .searchField2.
• Added one more class to the event field called .btcf (Clear float class).

And here's the CSS:

#loginArea {      border-radius: 25px;      font-family: 'russo_oneregular';      font-size: 20px;      padding: 20px;      background-color: #000000;      box-sizing: border-box;      color: #ffffff;      display: inline-block;      position: absolute;      top: 50%;      left: 50%;      transform: translateX(-50%) translateY(-50%);  }  .btcf:after {      content: "";      display: table;      clear: both;  }  .searchField, .searchField2 {      display: block;      float: left;      box-sizing: border-box;      width: 25%;  }  .searchField2 {      width: 50%;  }  

• Code for #loginArea is the same.
• .searchField and .searchField2 are identical except for the width.
• Added the class btcf:after which is the clear float for the floated fields.

The border-box is needed on the fields as the browsers default styles adds borders, padding and maybe some more stuff.

And here's a fiddle: https://jsfiddle.net/3mwn14fk/16/

Answer by Pradeep Jha for How do I keep my input fields on one line while centering the DIV that contains them?

#loginArea {    white-space: nowrap;    border-radius: 25px;    font-family: 'russo_oneregular';    font-size: 20px;    padding: 20px;    background-color: #000000;    color: #ffffff;    display: inline-block;    position: absolute;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-50%);  }  #search-form {      margin: 0px;      padding: 0px;      width: 100%;  }    .searchField {      display: inline;      width:25%;  }  .search_button{      display: inline;      width:22%;  }

      	
  	Search For Results
   	
  		  		  		  		  
	
    

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72