How to Get These Two Divs Side-By-Side

How to get these two divs side-by-side?

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Check working example at http://jsfiddle.net/c6242/1/

how to place two divs side by side

Try using bootstrap grid's. It can be something like this.

<div class="col-sm-12">
    <div class="col-sm-6">
        <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
    </div>
    <div class="col-sm-6">
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">      
    </div>
</div>

Demo

These two divs won't sit side by side?

In order to be aligned side by side they must be in the same row.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script><div class="container">    <center>        <h2>How will the 'Savvy Club' help?</h2>        <br />    </center>    <div id="wrapper">        <div class="row">            <div class="col-md-6">                <p>The ‘Savvy Package’ has been created through a thorough knowledge of both Social Media and an understanding of what businesses need. This understanding has been learnt from us going up and dow the country delivering our informative and no holds barred workshop. We soon noticed that we left people inspired yet overwhelmed.</p>                <br />                <br />                               <p>The Savvy club is for businesses who are serious about seeing results through Social Media. We deliver support through webinars and workshops. Our Facebook Group delivers support and information giving members opportunity to share thoughts and experiences.</p>                <br />                <br />                <p><b>Consider the Savvy Club as the helpful, in house digital expert you never had.</b></p>            </div>            <div class="col-md-6">                <div class="square">                    <b>Stay On Top of Changes</b>                    <br />                    <p>One of the primary challenges for Social media marketing is that the tools are always changing. We help you keep up with the changes, thanks to a weekly webinars.</p>                </div>                <br />                <div class="square">                    <b>Quick Access to Help</b>                    <br />                    <p>Our Savvy Guru’s are on hand to answer any question that comes through the Group giving you the confidence to broadcast with confidence.</p>                </div>                <br />                <div class="square">                    <b>Sharpen Your Skills with Training</b>                    <br />                    <p>You’ll have immediate access to all Wisdom Wednesday replays we have delivered via the group, Ideal for binge viewing. We liken it to Netflix for digital strategy.</p>                </div>                <br />                <div class="square">                    <b>Support on Content</b>                    <br />                    <p>Knowing what to post and when can sometimes be a problem. Our content calendar briefing will guide you or inspire you on which direction your content should take.</p>                </div>                <br />                <div class="square2">                    <b>Someone to speak to</b>                    <br />                    <p>The first year of The Savvy’s delivery there was something missing although you could get questions answered via the group - the opportunity to brain storm and sound out ideas was missing. We have answered this with the second tier of the Savvy Package and called it pro. (Savvy Pro only).</p>                </div>            </div>        </div>    </div>   </div>

How to set two divs side by side

<style> 
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; } 
.header { height: 10%; width: 100%; } 
.wrapper { width: 100%; height: 80%; } 
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; } 
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; } 
.footer { height: 10px; width: 100%; } 
</style>

<body> 
  <div class="container">    
       <div class="header"></div>    
       <div class="wrapper">
          <div class="nav">
          </div>
          <div class="scrollable">
          </div>    
       </div>    
       <div class="footer"></div> 
      </div> 
</body>

how to put two divs side by side in css?

HTML:

    <div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

CSS:

    body {
        background-color: #444;
        margin: 0;
    }    
    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }
    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

Two divs side by side, without container

Given the fact you already use Flexbox, I suggest you do it for this too, like this.

If you don't want the container, just drop its markup and move its CSS properties to the body

Fiddle demo

Stack snippet

.container {  display: flex;                  /*  added  */  flex-wrap: wrap;                /*  added  */}
.heading {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-align: center;  margin-bottom: 35px;}
.section-one {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-transform: uppercase;  display: flex;  flex-wrap: wrap;  text-align: center;  justify-content: space-between;}
.item {  position: relative;  flex-shrink: 0;  margin: 0 auto;  margin-bottom: 15px;}
.section-left {  flex: 1 0 66.666%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 400px;  text-transform: uppercase;  margin-top: 80px;  padding-right: 80px;  box-sizing: border-box;         /*  added, make padding be included in set width  */  border: 1px dotted gray;        /*  demo purpose  */}
.section-right {  flex: 1 0 33.333%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 200px;  box-sizing: border-box;         /*  added, make border be included in set width  */        border: 1px dotted gray;        /*  demo purpose  */}

<div class="container">  <div class="heading">    <h2>Lorem ipsum dolor</h2>    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>  </div>  <!--- /.heading -->  <div class="section-one">    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>  </div>  <!--- /.section-one -->  <div class="section-left">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-left -->  <div class="section-right">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-right --></div>

getting two divs to display side-by-side

If you wrap the two containers in a div set to display: flex you'll be fine.

<div class="wrapper">
  <div class="container">
    <!-- your content -->
  </div>
  <div class="container">
    <!-- your content -->
  </div>
</div>

.wrapper {
  display: flex;
}

I hope it helps :)

How can i place two divs side by side and a third div aligning with the second

You can do this with below:

    .wrapper {      display: flex;      flex-wrap: wrap;      justify-content: flex-end;    }        .div {      flex-basis: 50%;      min-height: 100px;    }        .div1 {      background: red;    }    .div2 {      background: blue;    }    .div3 {      background: aqua;    }

<div class="wrapper">  <div class="div div1">div1</div>  <div class="div div2">div2</div>  <div class="div div3">div3</div></div>

2 divs side-by-side centered on page

If you remove your margin-left and your float from div#info they should position side-by-side.

div#info {
  border: 15px solid #14f20c;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  width: 550px;
}

You could also use flexbox on your wrapping #content div like so:

.content {
  display: flex;
  margin: 0 auto;
  margin-top: 230px;
}

If you remove the min-width it will center your items correctly. You can also play around with other flexbox properties to achieve the same effects (see justify-content and flex-direction).

Two divs side by side: how can i make the div that is on the left side go down when it breaks for responsive layout?

It depends on your implementation. If you are using a grid system, most of them have the ability to "push" or "pull" elements in the grid. You should set up the content in the order you want it to display on the smallest device and use the "push" and "pull" classes to modify the position.

If you are not using a grid system and are just floating elements, just use float:right instead of float:left.

Updated per comment:

<div class="row">
    <div class="col-md-9 col-md-push-3">
        <div class="B">B</div>
    </div>
    <div class="col-md-3 col-md-pull-9">
        <div class="A">A</div>
    </div>
</div>

How to Get These Two Divs Side-By-Side