CODEWITHSUNDEEP
javascripthtmlcssforms
Hugo Almeida
Hugo Almeida

Reputation: 105

How can I position two dropdown's side by side?

I'm learning HTML and trying to make a form. My problem now is setting two dropdowns side by side, instead of one on top of the other. Here's the code (I removed unnecessary code, but if you think I should provide it, let me know):

body {margin:0; background-color:rgb(56, 0, 121)}

.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}
<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
                <label for="orgType"></label>
                <select name="orgType" id="orgType">
                    <option disabled="disabled" selected="selected">Type</option>
                    <option value="gang">1</option>
                    <option value="terrorist">2</option>
                </select>
                <label for="orgStyle"></label>
                <select name="orgStyle" id="orgStyle">
                    <option disabled="disabled" selected="selected">Style</option>
                    <option value="gang">1</option>
                    <option value="classic">2</option>
                </select>
                <button class="btn btn--radius btn--green" type="submit">Search</button>
            </form>
        </div>
    </body>
</html>

Here's the form:

image description

Here's what I'm trying to do (don't pay to much attention to the measurements and positioning): enter image description here

Upvotes: 1

Views: 876

Answers (3)

John David
John David

Reputation: 632

you can try with this code.

You have to wrap two select and label elements inside the div and apply display:flex into the parent element.

body {margin:0; background-color:rgb(56, 0, 121)}
form{
    display: flex;
    flex-direction: column;
    align-items: center; 
}
.form-control{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form-group{
    padding: 0px 10px;
}
.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

.org-bar 

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

.active {
  background-color: rgba(0, 140, 255, 1);
}

.icon-bar a:hover {
  background-color: rgba(0, 140, 255, 0.5);
}
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <body>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
              <div class="form-control">
                <div class="form-group">
                  <label for="orgType"></label>
                  <select name="orgType" id="orgType">
                      <option disabled="disabled" selected="selected">Type</option>
                      <option value="gang">1</option>
                      <option value="terrorist">2</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="orgStyle"></label>
                  <select name="orgStyle" id="orgStyle">
                      <option disabled="disabled" selected="selected">Style</option>
                      <option value="gang">1</option>
                      <option value="classic">2</option>
                  </select>
                </div>
              </div>
                <button class="btn btn--radius btn--green" type="submit">Search</button>
            </form>
        </div>
    </body>
</html>

Upvotes: 2

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Here i added answer. I wrapped two select element inside div and button also inside div. Using float:left align as expected.

body {margin:0; background-color:rgb(56, 0, 121)}

.org-bar {
    margin: 10%;
    width: 400px;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
    border-radius: 15px 15px 15px 15px;
    padding: 16px;
}

.textInput {
    margin-top: 20px;
    font-size: 15px;
    padding: 10px;
    width: 250px;  
}

.org-bar h1 {
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: rgb(0, 0, 0);
    font-size: 27px;
    text-transform: uppercase;
    font-family: 'Arial'
}

.org-bar label {
    display: block;
    text-align: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}
.form-element{
float:left;
width:50%
}
.button-div{ 
width:80px;
margin-left:auto;
margin-right:auto;
padding-top:30px;
} 
.form-element #orgType{
float:right;margin-right:10px;
}
<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <div class="org-bar">
            <h1>Panel</h1>
            <form>
                <div class="form-element">
                <label for="orgType"></label>
                <select name="orgType" id="orgType">
                    <option disabled="disabled" selected="selected">Type</option>
                    <option value="gang">1</option>
                    <option value="terrorist">2</option>
                </select>
                </div>
                <div class="form-element">
                <label for="orgStyle"></label>
                <select name="orgStyle" id="orgStyle">
                    <option disabled="disabled" selected="selected">Style</option>
                    <option value="gang">1</option>
                    <option value="classic">2</option>
                </select>
                </div>
                <div class="button-div">
                <button class="btn btn--radius btn--green" type="submit">Search</button>
                </div>
            </form>
        </div>
    </body>
</html>

Upvotes: 1

Anil
Anil

Reputation: 121

Change the "display" property to "inline-block" inside ".org-bar label" or just remove it. Will work in both the cases as select is an inline element

Upvotes: 0

Related Questions