Make divs be closer to each other

Question

I have this three cols, the matter is that the second one has much more content than the others so its height is higher.

How it shoud be

That´s the result i have

The content is charge from other htmls.

In addittion i will have to make the divs drag & dropa so flexbox does not good for my problem.

 $('.component-container').sortable({
    cursor: 'move',
    placeholder: 'ui-state-highlight',
    start: function(e, ui) {
      ui.placeholder.width(ui.item.find('.panel').width());
      ui.placeholder.height(ui.item.find('.panel').height());
      ui.placeholder.addClass(ui.item.attr("class"));
    }

                                              
                                                                                            
 <div id="fila" class="row center" style="text-align: center;">
      <div class="pan col-md-6 col-sm-12">
        <div class="row">
          <div class="pan col-md-12 col-sm-12 order-sm-first box" id="panel1">
          </div>
        </div>
        <div class="row">
          <div class="pan col-md-12 col-sm-12 box" id="panel3">
            
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="pan col-md-12 col-sm-12 big-box" id="panel2">
        </div>
      </div>
 </div>

EDIT

That's how I have my code now and I have two problems, in resposive it display different panel2 and panel3&panel1 because the lasts are in a row meanwhile the others aren't. The other problem is that drag and drop doesn´t work properlly.

Thanks a lot

There is no clearfix class in Bootstrap 4, and columns must be the immediate child of row (not row>col>col). [Read the docs](http://getbootstrap.com/docs/4.1/layout/grid/) — Carol Skelly, Apr 24 '18 at 09:26
Hi ZymSystem, i´m sorry but i have tried the solution to the question you said it was answered before and two things, first,the solution that´s said there doesn´´solve my problem, and second there is not being asking about the compatibility with drag and drop function. Thanks anyway — Borja, Apr 24 '18 at 09:59

Aryan Twanju · Answer 1 · 2018-04-24T09:50:29.987

1

You can insert the first 2 boxes in one div and the bigger one in another div. That way you can achieve the layout you wanted. Try this code.

<div id="fila" class="row center" style="text-align: center;">
    <div class="col-md-6 col-sm-12">
        <div class="row">
            <div class="col-md-12 order-sm-first" id="panel1">
                panel 1
            </div>
            <div class="col-md-12" id="panel2">
                panel 2
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12"> panel 3 </div>
</div>

edited Apr 24 '18 at 09:50

answered Apr 24 '18 at 08:27

Aryan Twanju

2,464
1
9
12

It makes the divs being displayed as i want, however when i tried to drag and drop them it drag the entire div "col-md-"6 instead of "panel1" or "panel2" that should move – Borja Apr 24 '18 at 09:44
I don't believe the issue with drag and drop is because of css, however I have made some changes to the code in my answer, I hope that would fix your drag and drop issue. – Aryan Twanju Apr 24 '18 at 09:51

score 1 · Answer 2 · answered Apr 24 '18 at 08:32

Attached code-snippet shows a solution, using "CSS grid". You then control the margins in CSS by changing the margin values.

.wrapper {
  display: grid;
  grid-template-columns:
  40%
  1fr
  ;

grid-template-rows:
150px
150px
;
grid-template-areas:
"left-upper-box right-box"
"left-lower-box right-box"
  ;
}

.left-upper-box {
  grid-area: left-upper-box;
  background-color: grey;
  margin: 15px 0px 15px 10px;
}

.left-lower-box {
  grid-area: left-lower-box;
  background-color: grey;
  margin: 15px 0px 15px 10px;
}

.right-box {
  grid-area: right-box;
  background-color: grey;
  margin: 15px 50px 15px 50px;

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrapper">
    <div class="left-upper-box"></div>
    <div class="left-lower-box"></div>
    <div class="right-box"></div>
</div>

</body>
</html>

First of all thanks for answering, but would not that grid system produce conflicts with bootstrap grid system? — Borja, Apr 24 '18 at 08:37
You would have to test if they conflict. Difference is that bootsrap is a framework, meanwhile CSS grid is a grid system that is built-in within CSS. If you are not familiar with all technical detail i would suggest you stay with one solution to handle the grid layout. — Toolbox, Apr 24 '18 at 08:42
As reference, current browser support: https://caniuse.com/#feat=css-grid — Klooven, Apr 24 '18 at 09:00

ashawe · Answer 3 · 2018-04-24T08:47:38.927

Since I see you're using Bootstrap. All you need to do is to have one two columns in one row.

Then in one column (left in your case) add two rows.

<div id="fila" class="row center" style="text-align: center;">
    <div class="col-md-6 col-sm-12">
        <div class="row">
            <div class="col-md-12 col-sm-12 order-sm-first" id="panel1">
                hello
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-md-12 col-sm-12" id="panel2">
                Hello
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="col-md-12 col-sm-12" id="panel3">
            helllo
            <br/>
            <br/>
            hello
        </div>
    </div>
</div>

You can see the output here

score 0 · Answer 4 · edited Apr 24 '18 at 09:20

0

<div id="fila" class="row center" style="text-align: center;">
    <div class="col-md-6 col-sm-12">
        <div class="col-md-12 col-sm-12 order-sm-first " id="panel1">    
        </div>
        <div class="col-md-12 col-sm-12" id="panel2"> 
        </div>
    </div>

    <div class="clearfix "></div>

    <div class="col-md-6 col-sm-12">
        <div class="col-md-12 col-sm-12" id="panel3">    
        </div>
    </div>    
</div>

edited Apr 24 '18 at 09:20

ashawe

349
3
16

answered Apr 24 '18 at 08:39

Shaithya Kannan

142
9

Bootstrap alone cann't do this job. You have to make some adjustments in margin, in your own style sheet. – Shaithya Kannan Apr 24 '18 at 08:45

score 0 · Answer 5 · answered Apr 24 '18 at 08:46

You need to insert your 2 left boxes in one "col-md-6" and 1 right box on one "col-md-6" then you set the height to all boxes

#left_panel,#right_panel{
   border:2px solid red;
   margin:30px 0;
}

#left_panel{
   height: 200px;
}

#right_panel{
   height: 430px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

  <div id="fila" class="row center" style="text-align: center;">
    <div class="col-md-6 col-sm-6">
   <div class="col-md-12 col-sm-12 order-sm-first " id="left_panel">panel</div>
      <div class="col-md-12 col-sm-12 " id="left_panel">panel</div>
 </div>

 <div class="clearfix "></div>
 <div class="col-md-6 col-sm-6">
      <div class="col-md-12 col-sm-12" id="right_panel">panel</div>
 </div>
  </div>

</body>
</html>

Make divs be closer to each other

5 Answers5