0

I have the following code:

<div class="logo-social-box">            <!--Main Container-->
  <div class="logo"></div>               <!--First Div-->
  <div class="social-box"></div>         <!--Second Div-->
</div>

I want to set .logo and .social-box inline without using float property and these elements should be responsive.

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
  • 2
    What's wrong with using `float`? (as per the question title "without using float" but the reason is not mentioned in the question) – freedomn-m Jul 14 '16 at 08:56
  • Making the element responsive is not mutually exclusive with `float` - you can do both. The alternative to float would be to position them absolutely, although this causes a different set of problems. – Rory McCrossan Jul 14 '16 at 08:57

1 Answers1

3

Use display: flex

.logo-social-box {
  display: flex;
}

.logo-social-box .logo {
  background: #aaa;
  padding: 5px;
}

.logo-social-box .social-box {
  flex: 1;
  padding: 5px;
  background: #ddd;
}
<div class="logo-social-box">
  <div class="logo">            <!--First Div-->
  </div>
  <div class="social-box">      <!--Second Div-->
  </div>
</div>
Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
Asons
  • 84,923
  • 12
  • 110
  • 165
  • @LGSon this question is one the asked question in here (I'd give you the `without float` part) but still the answers now "use flex" ;) – dippas Jul 14 '18 at 09:55