No replies
osherdo
osherdo's picture
Offline
newbie
Last seen: 3 years 8 weeks ago
Timezone: GMT+2
Joined: 2016-02-16
Posts: 3
Points: 4

Hi.

I am trying to place 2 div elements side by side. I am kind of new to css and I cannot do it even though there are some examples on google.

This my code:

<div class="search_box_area">
<form class="form-wrapper cf">
    <input type="text" placeholder="Search for name/user..." required>
    <button type="submit">Search</button>  Or: 
</form>
 </div>
<!-- 2nd div -->
 
 <div class="mutual_interests_search dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Looking for people that:
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Eating Well</a></li>
    <li><a href="#">Train Hard</a></li>
    <li><a href="#">Looking for motivation</a></li>
  </ul>
</div>

The scss I am using for it is:

div {
  &.search_box_area {
    width: 60px;
    float: left;
    color: green  
  }
  &.mutual_interests_search dropdown {
    display: block;
    margin-left: 62px;
  }
}

Would really appreciate your help with this.