How to switch css table-cell from left to right? - html

Question

I have 3 types of layout, I'm just having trouble with the third.
I used css based table for the 2nd layout with two columns because of its flexibility in terms of height. But I can't able to bring the left column to the right.
The html markup should be as is. Only selector is allowed.
Please help me play with it. thanks guys!
body {
margin: 10px auto;
width: 80%
}
.wrapper {
margin: 10px;
width: 100%;
}
ul.menu {
background: orange;
padding: 10px
}
.content {
background: #ddd;
padding: 10px
}
/* table layout */
.wrapper.table {
display: table;
table-layout: fixed;
}
.table ul.menu,
.table .content {
display: table-cell;
vertical-align: top;
float: none
}
.table ul.menu {
width: 180px;
}
h2 {
font-weight: bold
}
<h2>Original layout</h2>
<div class="wrapper">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<h2>New layout after adding the selector "table"</h2>
<div class="wrapper table">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<h2>Need help with this. (bring menu section to the right after adding the selector "right")</h2>
<div class="wrapper table">
<ul class="menu right">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/g0x1o9bL/1/

Answer 1

rtl/ltr direction will do the trick :)
body { width:70%;margin:10px auto; }
.wrapper { width:100% }
.wrapper ul.menu { background:orange }
.wrapper .content { background:gray;}
.wrapper.table { display:table;table-layout:fixed;}
.wrapper.table ul.menu,
.wrapper.table .content { display: table-cell; direction: ltr;}
.wrapper.table ul.menu { width:180px; }
.wrapper.table.right { direction: rtl; }
<div class="wrapper">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<br>
<div class="wrapper table">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>
<br>
<div class="wrapper table right">
<ul class="menu">
<li>menu</li>
</ul>
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna Lorem ipsum dolor sit</div>
</div>
</div>

Answer 2

Like I said in comment section, if jQuery is allowed this is working solution (maybe not best one, not sure)
$(function(){
var elem = $("ul.right").parent("div.table");
var ul_right = $("ul.right").remove();
elem.append(ul_right);
})
http://jsfiddle.net/thisizmonster/g0x1o9bL/5/