how to make two divs next to each other

Question

unfortunately i dont know how to make these divs(Boxes) next to each other like the picture and put the images of the cars like the image , can anyone please help me

if there is a way with tables or divs please help me to do it

here is the image

Where is your code, Did you tried it? – Ilyas karim Mar 31 '17 at 13:10 — Ilyas karim, Mar 31 '17 at 13:10
You can use bootstrapgrid. – Ilyas karim Mar 31 '17 at 13:11 — Ilyas karim, Mar 31 '17 at 13:11

score 1 · Answer 1 · answered Mar 31 '17 at 13:14

1

.block1{
  background: red;
  height: 150px;
  padding-top: 30%;
}

.block2{
  background: green;
  height: 150px;
  padding-top: 30%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-xs-12 text-center">
<div class="col-xs-6">
<div class="block1">
  text
</div>
</div>


<div class="col-xs-6">
<div class="block2">
  text
</div>
</div>
</div>

answered Mar 31 '17 at 13:14

Venkatachalam

154
6

it works but when i view this on a mobile it's not responsive , all the text be overlaped and it's not working well – abdullraahmaan Mar 31 '17 at 22:34
use bootstrap frame work, it will work fine for above code. I given link also..can u go through this process... – Venkatachalam Apr 02 '17 at 04:18

score 0 · Answer 2 · answered Mar 31 '17 at 13:11

0

you can use float:left for your 2 divs inside a parent div

answered Mar 31 '17 at 13:11

seb7d

11
2

Prashanth Harish · Answer 3 · 2017-04-04T13:21:19.010

0

Try this html+bootstrap will work fine for mobile views :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row">
    <div class="col-sm-4">
     Image 1
    </div>
    <div class="col-sm-4">
      Image 2
    </div>
    <div class="col-sm-4">
      Image 3
    </div>
  </div>
</div>

</body>
</html>

edited Apr 04 '17 at 13:21

answered Mar 31 '17 at 13:12

Prashanth Harish

158
1
1
17

it works but when i view this on a mobile it's not responsive , all the text be overlaped and it's not working well – abdullraahmaan Mar 31 '17 at 22:34
Look above html will help. – Prashanth Harish Apr 04 '17 at 13:22

how to make two divs next to each other

3 Answers3