having problem in css of the popover file on button

hello
i was creating a popover on a button and implementing a few things in it …
but in the css margin-top is the property i want to use for my text field search button for my lables but i am unable to do so … can anyone help me with this problem …
and i want is that MY PRICE RANGE LABEL AND SLIDEBAR AND THE VALUE OF THE PRICE RANGE SHOUD COME INLINE … but when i move my bar all my label and value also move and it dosent come inline…

<@page contentType="text/html" pageEncoding="UTF-8">

  <form>

RENTALS

<span id="loginForm">  
        <span class="form-label" style="text-decoration: none;color: #669900">Find Your Accommodation</span>
        <span  > <input class="abc" type="text" ></span>
        <a href="#" class="S1" style="text-decoration: none;background-color: #669900">SEARCH </a>                 


        <label class="form-label1" style="color: #669900;">Rental Type</label>
        <span class="form-label2" style="color: #669900">Property Type</span>
        <span class="form-label3" style="color: #669900">Listing source</span>     

      <select size="1" class="ss">
    <option value="nnnj">Family</option>
    <option value="nnnj">Shared</option>
    <option value="nnnj">Individuals</option>
    </select>
       
         <select size="1" class="aa">
    <option value="nnnj">PG</option>
    <option value="nnnj">Hostel</option>
    <option value="nnnj">Apartment</option>
    <option value="nnnj">Independent Rooms</option>
         </select>
         <select size="1" class="dd">
    <option value="nnnj">Any Source</option>
    
    <option value="nnnj">Agent</option>
    </select>
       
        <span class="form-label4" style="color: #669900">Price Range
<input class="ll" type="range" min="0" max="10000" value="0" step="20" onchange="showValue(this.value)" />
<class="tt" id="range" style="color: #669900">0
</span>

//this is where css begins

.tt{

        margin-top: 20px;
    }
    .ll
    {margin-top: 10px;
        
    }
    .aaa
    {
        margin-top: -86px;
        height: 55px;
    }
    .dv
    {
       margin-top: 30px; 
    }
    .ss
    {
        margin-left: 20px;
        border-radius: 5px;
    }
      .popover{
position: absolute;

margin-left: -370px;
font-size: 0px;
line-height: 0%;
width: 5px;
border-top: 25px solid rgba(0,0,0,0);
border-left: 25px solid rgba(0,0,0,0);
border-right: 25px solid rgba(0,0,0,0);
border-bottom: 25px solid black;
margin-top: 30px;
}

 .aa
 {
    margin-left: 30px;
                border-radius: 5px;

 }
     
 .dd{margin-left: 30px;            border-radius: 5px;

}
.S1{
height: 20px;
width: 70px;
border-style: groove;
border-radius: 5px;

        background-color: black;
        font-weight: bold;

font-size: 1em;
text-align: center;
vertical-align: middle;
color: #fff;
margin-top: 30px;

    }
    .abc{
        height: 20px;
        width: 300px;
        border-style: groove;
        border-radius: 5px;

margin-top: 10px;
margin-left: 20px;

    }
    #loginForm  {
        border: #333;
        border-style: groove;
        border-radius: 15px;

position: fixed; margin-left: 400px;
margin-top: 125px;
display: none;
width: 440px;
height: 170px;
color: black;
background-color: black;
}

#login {
display:block;
opacity: 0.7;

}

.form-label {
font-size: 24px;
font-weight: bold;
margin-left: 23px;

}
.form-label1 {
font-size: 15px;
font-weight: bold;
margin-left: 20px;
margin-top: 150px;

}

.form-label2{
font-size: 15px;
font-weight: bold;
margin-left: 40px;
}

.form-label3 {
font-size: 15px;
font-weight: bold;
margin-left: 90px;

}

.form-label4 {
font-size: 15px;
font-weight: bold;
margin-left: 80px;

}

     #a li
     { //position: absolute;
         float: left;
          opacity: 0.7;

         padding: 20px;
     }

.fancy_button {
//margin-top: 330px;
position: absolute;

top: 300px;
left: 400px;
display: block;
background: #62869b;
width: 130px;
height: 120px;

font-weight: bold;
font-size: 1em;
text-align: center;
vertical-align: middle;
line-height: 100px;
//font: 0.8em/8px Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 20px;
background-color: black;
border-style: groove;

}

.fancy_button:hover {
background: blueviolet;
}

hey coders… the code might seem messy … pls copy paste the coding and run the file … it will run then u can see for the problem i am having…
thankew

SOLVED…
elements have a default display property of inline. inline elements are not affected by margins or paddings, amongst other things.

Just give .form_head a display:block or display:inline-block in th css and then the margin-top and other functions will work…
happy codin :slight_smile: