Guillermorivia Guillermorivia - 4 months ago 24
jQuery Question

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);

Answer

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/