CSS positioning div into two column properly

Question

I'm having a problem in positioning a div if one post is contain many text. The div will apparently getting a bigger space. Here is the link of my code visualize what ouput I want to display.

HTML

<div class="container">
   <div>DIV 1 Sample text</div>
   <div> DIV 2 Sample text Sample text Sample text</div>
   <div> DIV 3 Sample text Sample text Sample text</div>
   <div> DIV 4</div>    
</div>

CSS:

.container {
    width:400px;
}

.container div {
    float:left;
    width:180px;
    background:red;
    margin:2px;
}

We don't like to see jsbin code. Please include the code inside the question... — Bhojendra Rauniyar, Sep 08 '14 at 05:10
This types of questions are asked daily... Please see the duplicate question [Remove gap between Div box using CSS](http://stackoverflow.com/questions/25709393/remove-gap-between-div-box-using-css) — Bhojendra Rauniyar, Sep 08 '14 at 05:17
@C-linkNepal I've check sir the link you've given. However the css column: auto 3 is the code because it has 3 column gaps. in my case what if DIV 2 container many many text sir. Thanks — Zai Blitz, Sep 08 '14 at 05:48

score 0 · Answer 1 · answered Sep 08 '14 at 05:15

0

Wrap the the two left divs in one div and two right divs in another div

    <div class="container">
    <div class="left">
   <div>DIV 1 Sample text</div>
   <div> DIV 2 Sample text Sample text Sample 
     text</div>
    </div>
    <div class="right">
    <div> DIV 3 Sample text Sample text Sample 
    text</div><div> DIV 4</div> </div>   
    </div>

answered Sep 08 '14 at 05:15

Ram

87
1
10

May want to include the css for classes `right` and `left` is right regardless but may seal the deal – Brian Dillingham Sep 08 '14 at 05:18
the code I've provided is an ajax json data. it is process in the server. so probably you cannot put left right class in the div. Anyway, thanks for the effort brah. – Zai Blitz Sep 08 '14 at 05:25
if you cannot change the order You can try to wrap the divs or arrange using jquery after getting the response from the server . – Ram Sep 09 '14 at 06:37

score 0 · Answer 2 · answered Sep 08 '14 at 05:33

<div class="container">
    <div class="left">
   <div>DIV 1 Sample text</div>
   <div> DIV 3 Sample text Sample text Sample text</div>
    </div>
    <div class="left">
    <div> DIV 2 Sample text Sample text Sample text</div>
    <div> DIV 4</div> </div>   
    </div>

and css should be

.container {

  width:400px;

}

.container .left {
  float:left;
  width:180px;
  background:red;
  margin:2px;
}

score 0 · Answer 3 · answered Sep 08 '14 at 09:06

This is masonry kind of approach.

Using salvattore (NOT TESTED)

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

CSS

#grid[data-columns]::before {
    content: '2 .column.size-1of2';
}

.column { float: left; }
.size-1of2 { width: 50%; }

Refer http://salvattore.com/ to achieve masonry

CSS positioning div into two column properly

3 Answers3