Struggling to align form inputs next to each other

I have tried various methods such as adjusting padding and margins, using tables, displaying as inline and inline-block, and separating parts of the code into different divs. However, I am still unable to get my inputs to be displayed side by side. Here is a link to the code on codepen.io. Can someone please provide some assistance?

/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html {
    background-color: #fff;
}

body {
    background: #ede6e6;
    margin:0 auto;
    font-family: arial, helvetica, sans-serif ;
}

a {
    text-decoration: none;
    color:#fff;
}
li {
    display: inline;
    padding: 10px;
    font-size: 16px;
    color:#fff;
}

/* --------------------------------HEADER------------------------------------- */
header{
  background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
  background-size: cover;
  background-position: center;
  right:-20px;
  left: -20px;
  min-height: 100vh;
  margin-bottom: 300px;
  overflow-x: hidden;

background-attachment: fixed;
position: absolute;
z-index: 80;

}

.row{
  padding-top: 40px;
  border-bottom: 2px solid white;


}

}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{

  float:left;
}
.top-left ul {
  font-size: 16px;
  padding-left: 150px;
  padding-top: -80px;
  padding-bottom: 30px

}


/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;

}
.social-links li{
  font-size: 100%;


}

.social-links li:hover,
.social-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;
}



/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
  float:right;

}
.top-right  {
float: right;
padding-bottom: 30px;
}


.top-right li {
  font-size: 100%;
  font-weight: 200;
}
  .top-right li:hover,
  .top-right li:active{
color:#005242;
  transition: color 0.2s;
}


.top-right li:first-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
.top-right li:last-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
/* -------------------------------H1------------------------------------- */

.main-header{
  padding-top: 30px;
  padding-left: 130px;
  float:left;

}
.header-text{
  display: inline-block;
}

h1{
font-size: 90%;
  color:#fff;
  font-family: sans-serif;


}
span{
  color:#00a786
}

/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
  float: right;
  padding-right: 30px;
  padding-top: 40px;
}
.main-nav-links{
  display: inline-block;
}

.main-nav-links li:hover,
.main-nav-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;

}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{



}
.main-content{
  text-align: center;


}
.content{
  padding-top: 50px;
  color: #fff;
  display:inline-block;
}
.content h2{

  font-size: 100%;
}

.content p{
  font-size: 60%
}

/* -------------------------------BUTTONS------------------------------------ */

.btn:link,
.btn:visited
  input[type=submit]{
    display: inline-block;
    padding :10px 30px;
    margin-top: 60px;
    font-size: 60%;
    font-weight: 300;
    text-decoration: none;
    border-radius: 5px;

    transition: background-color 0.2s,border 0.2s,color 0.2s;
    msargin-right: 15px;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
    background-color: #00a786;
    border: 1px solid #005242;
    color: #fff;

  }
    .btn-full:hover,
    .btn-full:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }

    .search-btn:link,
    .search-btn:visited
    input[type=submit]{
        display: inline-block;
        padding :10px 30px;
        margin-top: 60px;
        font-size: 60%;
        font-weight: 300;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.2s,border 0.2s,color 0.2s;

    }
  .search-btn:hover,
.search-btn:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }
/* -------------------------------Section-Search------------------------------------ */
    .section-Search{
      background-color: #003027;
      border: 2px solid #003027;
      border-radius: 3px;
      position:relative;
      left:200px;
      right:20px;
      top: 500px;
      height: 30vh;
      width: 600px;
      z-index: 99;

}
   .main-Search{
padding:30px 10px;
  display: inline;

}

.col1{

}

.col3{



<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
    <link rel="stylesheet" type="text/css" href="vendors/">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/styling.css">
    <link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
    <title>Williams Rental Properties</title>
</head>
<body>
  <header>
    <!--- TOP LEFT-------->
    <div class="row">
        <div class="top-left">
            <ul>
                <li><i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
                <li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
            </ul>
        </div>
        <!--- SOCIAL LINKS-------->
        <div class="social-links">
            <ul>
                <li><a href="#"><i class="fab fa-facebook-f"> </a></i></li>
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li><a href="#"><i class="fab fa-pinterest-square"></i></a></li>
                <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
        </div>
        <!--- TOP RIGHT-------->
        <div class="top-right">
            <ul>
                <li><i class="fas fa-user "> <a href="#"> Register</i></a></li>
                <li><i class="fas fa-sign-in-alt"><a href="#">Login</i></a></li>
            </ul>
        </div>
    </div>
    <!--- main Header-------->

    <div class="main-header">
        <div class="header-text">
            <h1>Williams <span> Rental</span> Properties</h1>
        </div>
    </div>

    <nav class="main-nav">
        <div class="main-nav-links">
            <ul>
                <li> <a href="#"> Home</a></li>
                <li> <a href="#"> Featured List</a></li>
                <li> <a href="#"> About Us</a></li>
                <li> <a href="#"> Pages</a></li>
                <li> <a href="#"> Blog</a></li>
                <li> <a href="#"> contact</a></li>
            </ul>
        </div>
    </nav>

    <section class="main-section">
        <div class="main-content">
            <div class="content">
                <h2>Let Us Find You Your Dream Home!</h2>
                <p>Search real estate property records, houses, condos, land and more .
                Find property info from the most comprehensive source data.</p>
                <a class="btn btn-full" href="#">View Details</a>
            </div>
        </div>
    </section>
  </header>

  <section class ="section-Search">
    <div class="main-Search">



    <form class="Search" action="index.html" method="post">
        <label for="address"></label>

        <!--- city-------->
        <div class="col1">
            <input type="text" name="Search" placeholder="keyword,zipcode">
        </div>
        <!--- city-------->
        
        <div class="col2">
            <label for="city"></label>
            <select class="city" name="city">
                <option value="city">city</option>
            </select>
        </div>

        <!--- state------->
        <div class="col3">
            <label for="state"></label>
            <select class="state" name="state-form">
                <option value="state">state</option>
        </div>

        <!--- search button------->
        <a class="search-btn" href="#">Search</a>

        </select>

    </form>
  </section>
</body>
</html>

javascripthtmlcssformsweb-deployment

Answer №1

To ensure proper formatting, consolidate the content currently in separate div elements into a single div.

Additionally, it seems that the correct usage of the label element is not followed. The value of the for attribute within the label should match the id attribute of the form element associated with the label.

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html{
      background-color: #fff;
}

body{
      background: #ede6e6;
      margin:0 auto;
      font-family: arial, helvetica, sans-serif ;
    }

a{
  text-decoration: none;
  color:#fff;
}
li{
  display: inline;
  padding: 10px;
  font-size: 16px;
  color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
  background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
  background-size: cover;
  background-position: center;
  right:-20px;
  left: -20px;
  min-height: 100vh;
  margin-bottom: 300px;
  overflow-x: hidden;

background-attachment: fixed;
position: absolute;
z-index: 80;

}

.row{
  padding-top: 40px;
  border-bottom: 2px solid white;


}

}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{

  float:left;
}
.top-left ul {
  font-size: 16px;
  padding-left: 150px;
  padding-top: -80px;
  padding-bottom: 30px

}


/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;

}
.social-links li{
  font-size: 100%;


}

.social-links li:hover,
.social-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;
}



/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
  float:right;

}
.top-right  {
float: right;
padding-bottom: 30px;
}


.top-right li {
  font-size: 100%;
  font-weight: 200;
}
  .top-right li:hover,
  .top-right li:active{
color:#005242;
  transition: color 0.2s;
}


.top-right li:first-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
.top-right li:last-child{
  border-left: 2px solid #fff;
  border-width: thin;
}
/* -------------------------------H1------------------------------------- */

.main-header{
  padding-top: 30px;
  padding-left: 130px;
  float:left;

}
.header-text{
  display: inline-block;
}

h1{
font-size: 90%;
  color:#fff;
  font-family: sans-serif;


}
span{
  color:#00a786
}

/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
  float: right;
  padding-right: 30px;
  padding-top: 40px;
}
.main-nav-links{
  display: inline-block;
}

.main-nav-links li:hover,
.main-nav-links li:active{
  border-bottom: 2px solid #00a786;
  transition: border-bottom 0.2s;

}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{




}
.main-content{
  text-align: center;


}
.content{
  padding-top: 50px;
  color: #fff;
  display:inline-block;
}
.content h2{

  font-size: 100%;
}

.content p{
  font-size: 60%
}

/* -------------------------------BUTTONS------------------------------------ */

.btn:link,
.btn:visited
  input[type=submit]{
    display: inline-block;
    padding :10px 30px;
    margin-top: 60px;
    font-size: 60%;
    font-weight: 300;
    text-decoration: none;
    border-radius: 5px;

    transition: background-color 0.2s,border 0.2s,color 0.2s;
    msargin-right: 15px;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
    background-color: #00a786;
    border: 1px solid #005242;
    color: #fff;

  }
    .btn-full:hover,
    .btn-full:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }

    .search-btn:link,
    .search-btn:visited
    input[type=submit]{
        display: inline-block;
        padding :10px 30px;
        margin-top: 60px;
        font-size: 60%;
        font-weight: 300;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.2s,border 0.2s,color 0.2s;

    }
  .search-btn:hover,
.search-btn:active,
    input[type=submit]{
        background-color: #005242;
        border: 1px solid #005242;
        color: #fff;

    }
/* -------------------------------Section-Search------------------------------------ */
    .section-Search{
      background-color: #003027;
      border: 2px solid #003027;
      border-radius: 3px;
      position:relative;
      left:200px;
      right:20px;
      top: 500px;
      height: 30vh;
      width: 600px;
      z-index: 99;

}
   .main-Search{
padding:30px 10px;
  display: inline;

}

.col1{

}

.col3{


}
<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
      <link rel="stylesheet" type="text/css" href="vendors/">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="css/styling.css">
      <link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
      <title>Williams Rental Propertie's</title>
</head>
<body>
  <header>
    <!--- TOP LEFT-------->
    <div class="row">
    <div class="top-left">
      <ul>
        <li>  <i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
        <li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
      </ul>
    </div>
    <!--- SOCIAL LINKS-------->
    <div class="social-links">
        <ul>
          <li><a href="#"><i class="fab fa-facebook-f"> </a></i></li>
          <li><a href="#"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#"><i class="fab fa-pinterest-square"></i></a></li>
          <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
    </div>
    <!--- TOP RIGHT-------->
    <div class="top-right">
        <ul>
          <li><i class="fas fa-user "> <a href="#"> Register</i></a></li>
          <li> <i class="fas fa-sign-in-alt"><a href="#">Login</i></a></li>
        </ul>
    </div>
</div>
    <!--- main Header-------->

    <div class="main-header">
      <div class="header-text">
        <h1>Williams <span> Rental</span> Properties</h1>
    </div>
  </div>

  <nav class="main-nav">
    <div class="main-nav-links">
      <ul>
        <li> <a href="#"> Home</a></li>
        <li> <a href="#"> Featured List</a></li>
        <li> <a href="#"> About Us</a></li>
        <li> <a href="#"> Pages</a></li>
        <li> <a href="#"> Blog</a></li>
        <li> <a href="#"> contact</a></li>
      </ul>

    </div>

  </nav>

  <section class="main-section">
    <div class="main-content">
      <div class="content">
        <h2>Let Us Find You Your Dream Home!</h2>
        <p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
     <a class="btn btn-full" href="#">View Details</a>
      </div>
    </div>
  </section>
  </header>

  <section class ="section-Search">
    <div class="main-Search">
      <form class="Search" action="index.html" method="post">
        <label for="address"></label>

          <!--- city-------->
          <div class="col1">
        <input type="text" name="Search" placeholder="keyword,zipcode">

        <label for="city"></label>
      <select class="city" name="city">
        <option value="city">city</option>
        </select>

        <label for="state"></label>
      <select class="state" name="state-form">
        <option value="state">state</option>
        </div>
    <!--- search button------->
    <a class="search-btn" href="#">Search</a>

      </select>


      </form>



  </section>

</body>
</html>

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

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Issue encountered while attempting to pass a function to a child component in React (Uncaught error: TypeError - result is not a function)

How can I pass the result obtained from an API call made in a child component to the parent component? Let's take a look: PARENT COMPONENT: const Parent = () => { function logResult(resultFromAPI) { console.log(resultFromAPI); } ...

javascriptreactjsreact-props

Concealing a feature across all pages of the website

I have implemented alert boxes that appear on all pages of the website. Users can individually close each alert box: $(document).ready(function() { $("#close-alert-box-news").click(function() { $("#alert-box-news").hide(800); }); $("#close-al ...

javascriptphpjquerycookieslocal-storage

Clicking on an embedded YouTube video will automatically redirect you to the video's

Hey there, I've added an embedded video to my website and I'm wondering if it's possible to redirect users to a new site when they click the play button? Thanks in advance! ...

javascriptphphttp-redirectyoutube

When requesting a Node.js API from Javascript fetch, the session custom property is throwing an undefined error

I am currently working on a User Login Project, where the APIs are built using Node.js and Express. The UI part is developed using HTML and JavaScript, with these components existing as separate projects. Upon user login, a fetch call is made in JavaScrip ...

javascriptnode.jsexpresssessioncookies

What could be causing my JavaScript loop to only display the final value?

Story Behind the Game In my latest project, I am delving into the world of creating a captivating 2D side-scrolling game using HTML and JavaScript. To ensure smooth gameplay, I have opted to incorporate ES6 for efficient management of all game objects. C ...

javascriptarraysloops

Retrieving Content within <b></b> Tags from an RSS Feed XML (with Javascript/React)

After parsing an RSS Feed from Upwork, I have extracted job item data points such as title and link. However, a significant amount of the necessary information about each job (category, skills, etc) is buried within the "content" data item as one large blo ...

javascriptreactjsxmlxml-parsingrss

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

jqueryhtmlcss

How can the background of a div be altered when text is typed into an input field?

I need help with the following code. I want to be able to change the background color of a div with the class "target_bg" from red (default) to green every time someone enters or types text into the input field. <div class="target_bg"></div> & ...

javascripthtmlcss

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

imagecssvue.jsbootstrap-4

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

Unable to hear sound properly through Web Audio

I'm experimenting with playing a wav file using the AudioContext. I've noticed that it plays correctly when loaded with the <audio> tag (as demonstrated in this example on jsFiddle), but encounters issues when using AudioContext. var startB ...

javascripthtml5-audioweb-audio-apiaudiocontext

Make the textarea larger and bring it to the forefront when it is selected

I would like to make a textarea expand (increase its height) when it is in focus. The expanded textarea should not push the content down, but rather be displayed above other content. Currently, this is the code I am using (check out the example here): $( ...

javascriptjquerytextareaz-index

Limiting multiple checkbox inputs in a React application can be easily achieved by utilizing React

Trying to create a form where the user can only check three boxes and uncheck them. The decrement on setCurrentData(currentData - 1) is not working as expected. Even after deselecting, the currentData remains at 3, preventing the user from checking any mo ...

javascriptreactjs

AngularJS $compile function is failing to render a custom template

Hi there, I am facing an issue while trying to render a custom template using the $compile function. The error message I keep getting is: unrecognized expression: {{senddata}} I have provided my code below for reference: app.controller('MainCtrl&ap ...

javascripthtmlangularjs

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

MongoDB Driver Alert: MongoError - Cursor Not Found. Cursor ID 7820213409290816 was not located in the specified namespace db_name.collection_name

Having successfully created a Nodejs API server that connects to AWS MongoDB (version: 3.6), everything seems to function flawlessly when calling one specific API endpoint (api/lowest). However, upon making multiple simultaneous calls to this API (15 in to ...

javascriptnode.jsmongodb

Unable to click on hyperlinks in TinyMCE's read-only mode

I have a situation where I am displaying TinyMCE content inside a modal in read-only mode to show the user the information but not allow them to edit it. The content displays correctly, however, my links are not functioning. When clicked, they do not tri ...

javascriptangularjstinymcetinymce-4

Troubleshooting a malfunctioning Highcharts yAxis maximum setting

Can someone explain why the yAxis is still labeled up to 15 when the max value is set to 14? I've tried adjusting the startOnTick and maxPadding properties with no success. Here's the link to the code. $(function () { $('#container&apo ...

javascripthighcharts

Secure login verification coupled with intuitive navigation features

Just starting out with react native and I've created a UI for a restaurant app. Now I'm working on converting all static components to dynamic ones. My first task is figuring out how to implement login authentication and then navigate to a specif ...

javascriptreactjsreact-nativeecmascript-6jsx