CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Guillermorivia
Guillermorivia

Reputation: 25

Split 2 Container Divs Into 2 Columns

I tried to find the answer in the "may already have your answers section" but they didn't work or weren't what I am looking for. I'm trying to split 2 main Div working as containers into 2 columns (Different width). But they won't move.

Got the idea from here and tried to adapt it: http://jsfiddle.net/UrVsR/

What I'm trying to do is something like this...

enter image description here

+1 Link in comments as I can't post more than 2

Here is my HTML

<div id="page">
  <div id="name"></div>
  <div id="main">
    <div class="leftcolumn"> <-- Container Div
      <div id="cover"></div>
      <div id="info">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
    <div class="rightcolumn"> <-- Container Div
      <div id="synopsis">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="related">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="review">
        <div class="header"></div>
        <div class="body"></div>
      </div>
      <div id="whatever">
        <div class="header"></div>
        <div class="body"></div>
      </div>
    </div>
  </div>
</div>

I know the container were obvious, just in case I expressed myself badly

Here is my CSS

.column {
 float: left;
}
.left { 
}
.right { 
}
#main {
 width: 1000px;
 padding: 8px;
}
#main div {
 width: 400px;
}

.

var left = $("<div/>").addClass("column").addClass("left");
var right = $("<div/>").addClass("column").addClass("right");

var lElems = $("#main .leftcolumn");
var rElems = $("#main .rightcolumn");

lElems.appendTo(left);
rElems.appendTo(right);

$("#main").append(left,right);

Upvotes: 0

Views: 831

Answers (1)

P. Frank
P. Frank

Reputation: 5745

Add display:inline-block in your #main div css

#main div {
  display: inline-block;
  vertical-align: top;
  width: 400px;
}

Fiddle : https://jsfiddle.net/h0j88xsx/1/

Upvotes: 4

Related Questions