CODEWITHSUNDEEP
htmlcss
S.M_Emamian
S.M_Emamian

Reputation: 17383

Positioning divs top, left, right

I would like to make a div like below image :

enter image description here

I don't know where is my mistake :

https://jsfiddle.net/4ftb9349/

my css:

.div-newsletter-top {
    margin: 0px auto;
    width: 60%;
}

.button_register_nslwtr {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    background: #FFF none repeat scroll 0% 0%;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

div.cs-skin-elastic {
    background: transparent none repeat scroll 0% 0%;
    font-size: 0.9em;
    font-weight: 100;
    color: #B9B9B9;
    float: left;
    width: 25%;
    border: 1px solid #DDD;
    height: 20%;
    border-radius: 0px 20px 20px 0px;
}

my html :

    <div class="div-newsletter-top">
        <div style="width:50%;">
            <input style="width:60%;margin: 0 auto; "  type="text" class="form-control" />
        </div>

        <div style="width:34px;height:34px;float:right;">
            <button class="button_register_nslwtr">
                reg
            </button>
        </div>

        <div  style="width:60px">
            <select class="cs-select cs-skin-elastic">
                <option value="" disabled selected>choose city</option>
                <option value="" data-class="flag-france">tehran</option>

            </select>
        </div>




    </div>

Upvotes: 1

Views: 50

Answers (3)

marisusis
marisusis

Reputation: 342

Try adding this

.div-newsletter-top {
  margin: 0;
  width: 100%;
  position: relative;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
.button_register_nslwtr {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #D9D9D9;
  background: #FFF none repeat scroll 0% 0%;
  cursor: pointer;
  transition: all 0.2s ease 0s;
}
.cs-skin-elastic {
  background: transparent none repeat scroll 0% 0%;
  font-size: 0.9em;
  font-weight: 100;
  color: #B9B9B9;
  width: 25%;
  border: 1px solid #DDD;
  height: 20%;
  border-radius: 0px 20px 20px 0px;
}
<div class="div-newsletter-top">
  <input style="" type="text" class="form-control" />
  <select class="cs-select cs-skin-elastic">
    <option value="" disabled selected>choose city</option>
    <option value="" data-class="flag-france">tehran</option>
  </select>
  <button class="button_register_nslwtr">
    reg
  </button>
</div>

Upvotes: 0

David
David

Reputation: 26

You just need to add this code in your CSS

    .div-newsletter-top > div{
       position: relative;
       float: left;
    }

In fact, some more changes see updates jsfiddle

Upvotes: 1

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

The problem is that div elements are block elements. You can change them to span elements to get the result you want. See fiddle.

 <span style="width:50%;">
    <input style="width:60%;margin: 0 auto; "  type="text" class="form-control" />
 </span>

 <div style="width:34px;height:34px;float:right;">
     <button class="button_register_nslwtr">
         reg
    </button>
 </div>

 <span  style="width:60px">
     <select class="cs-select cs-skin-elastic">
         <option value="" disabled selected>choose city</option>
         <option value="" data-class="flag-france">tehran</option>

     </select>
 </span>

Upvotes: 2

Related Questions