CSS: How to put form input fields and button next to each other in the same line?


Tags: html,css

Problem :

I'm trying to achieve the following:

enter image description here

but I cannot get the background right. I've created this fiddle so you see what I've done. http://jsfiddle.net/dya9xh1e/

field { 
  font-family:arial, sans-serif; 
  border-color: #d9d9d9; 
  border-top:solid 1px #c0c0c0; 
}

input.field{
  width:140px;
}

.fieldwrapper{
  background-color:#CCC;
  width:500px;
  height:180px;
}

Could someone please advise on this?



Solution :

https://jsfiddle.net/rp1m13kk/

here you have something similar to the pic

input { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; background-color:#CCC; display: inline;} 
    input.field{width:140px;}

    .fieldwrapper{
	    background-color:#FFF;
	    width:1000px;
	    height:80px;
        border: 2px solid #CCC
    }

    #findbutton{background-color:red;}

You have several mistakes, for example in the firstline of your CSS, you need to add a . to reference the class. In my solution was change by the input selector.

Then I added the display:inline-block property to make components inline. But you need to change the container size, in order to fit the total input width, that's why I put 1000px


    CSS Howto..

    CSS - Minus top value how to get rid of the gap below it

    How to implement fade in effect for CSS checkbox

    how to bind newly created html element to its css

    HTML+Javascript: How can I Load Data in Div via Class?

    How to make an infinite horizontal container with fixed height

    How to style nested ID-elements in CSS/SASS

    How to apply css transform on iOS without using -webkit-transform?

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to keep two divs and images inside them to be side by side on browser resize?

    How to use printer friendly function with CTRL+p?

    How do I detect box-sizing border-box support with Modernizr

    How to vertically align text in my columns? [closed]

    How to eliminate the overlap border using CSS only

    CSS/Javascript: How to draw minimal border around an inline element?

    How to import css file for into Component .jsx file

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to load CSS for different URL in spring MVC app

    How to design aggregations filter in css for week, month?

    How to make all cross browser compatible skewed div edges?

    How to change css property of content:url in jquery?

    How to detect which button is clicked in javascript?

    How do I make these HTML blocks of info stay the same size?

    How to display two columns of blocks with CSS

    How to output different images depend on user screen?

    How to crop image with css

    How to style a div to be a responsive square? [duplicate]

    Showcase Image and Carousel Caption

    Jquery/CSS - how to clear a CSS-background set in another file I can't edit

    How to position background image in bottom right corner? (CSS)

    CSS Transition not showing with directive