如何使用css3并排放置两个div

Question

I have full div in which there are two divs: one div for images and other div for a form. The two divs should be side by side to each other. The issue is that the form div is going below the image, not side by side with the image. Here is the error image:

I have tried but have not got the needed results.

Both the div should be responsive for all devices

 .container { width: 960px; margin: 0px auto; } #left-column { height: 500px; width: 700px; float: left; background-color: blue; } #right-column { height: 500px; width: 260px; float: left; background-color: orange; } @media screen and (max-width:959px) { .container { width: 100%; } #left-column { width: 70%; } #right-column { width: 30%; } img { width: 100%; } } @media screen and (max-width:640px) { #left-column { width: 100%; } #right-column { width: 100%; } } @media screen and (max-width:320px) { .container { width: 320px; } } 

 <div class="container"> <img src="images/banner.jpg" /> <section id="left-column"> <img src="images/future.jpg" style="height:500px; width:700px;"> </section> <aside id="right-column"> <div class="col-md-4"> <div class="container"> <div class="form-row"> <div class="form-group"> <label for="name"></label> <input type="text" class="form-control" id="fullname" name="fullname" value="" placeholder="ENTER NAME" required> </div> <div class="form-group"> <label for="email"></label> <input type="email" class="form-control" id="email" name="email" value="" placeholder="ENTER EMAIL" required> </div> </div> <div class="form-group"> <label for="mobile"></label> <input type="text" class="form-control" id="mobile" name="mobile" pattern="[0-9]{10}" maxlength="16" value="" placeholder="ENTER MOBILE NUMBER" required> </div> <div class="form-group"> <label for="location"></label> <input type="text" class="form-control" id="location" name="location" value="" placeholder="ENTER LOCATION" required> </div> <div class="form-group"> <select class="form-control" id="program" name="program" required> <option value="program">SELECT YOUR PROGRAM</option> <option value="PG Diploma Programs">PG Diploma Programs</option> <option value="Diploma Programs">Diploma Programs</option> <option value="Certificate Programs">Certificate Programs</option> </select> </div> <label style="font-color:white;" for="business">PLEASE SELECT YOUR DATE OF BIRTH <div class="nogap"> <select name="day" class="form-control col-md-4" id="numberRooms"> <option value="dateofbirth">DD</option> <option value="0">DD</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select name="month" class="form-control col-md-4" id="numberBeds"> <option value="0">MM</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <select class="form-control col-md-4" name="year" id="year"> <option value="0">YYYY</option> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> </select> </div> </label> <div class="form-group"> <div class="checkbox"> <label><input type="checkbox" name="terms" value="check"><p>I allow NMIMS Distance Learning to contact me to provide details</p></label> </div> <div class="wrapper"> <!---<input type="submit" id= "submit" name="submit" value="Submit"/>--> <input type="submit" id="submit" name="submit" class="btn btn-primary" value="SEND ENQUIRY"> </div> </div> </div> </div> </aside> </div> 

Answer 1

It looks like you're using Bootstrap as a CSS framework. In that case I would recommend you check their docs on using the Bootstrap grid: https://getbootstrap.com/docs/3.3/examples/grid/ Something similar to the following will give you a responsive 2 column layout

<div class="container">
   <div class="row">
        <div class="col-sm-6">left column</div>
        <div class="col-sm-6">right column</div>
    </div>
</div>

To achieve similar using CSS you could do the follow:

.col-1,
.col-2 {
   display: inline-block;
   width: 50%;
}
@media screen and (max-width: 720px) {
    .col-1,
    .col-2 {
      display: block;
      width: 100%;
    }
}

This isn't the only way to achieve a 2 column responsive layout but I hope it will give you some pointers. You could also experiment with using floats, flexbox or the newer CSS grid.

It would be worth your time to do some reading up on best practices for your markup and styling. There are a number of issues there that might cause you some issues further on.