2

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><a href="#">menu</a></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><a href="#">menu</a></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><a href="#">menu</a></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/

Salman A
  • 262,204
  • 82
  • 430
  • 521
jamez88
  • 585
  • 2
  • 15

2 Answers2

4

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><a href="#">menu</a></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><a href="#">menu</a></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><a href="#">menu</a></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>
wj R.
  • 359
  • 6
  • 18
0

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Gereltod
  • 2,043
  • 8
  • 25
  • 39
  • Thanks, but if jquery is the only solution, is there a way to return back the ul to its original position when the browser is for instance, 400px? – jamez88 Mar 30 '15 at 07:25
  • Of course, there is many way. For example if you using responsive css, if screen size lesser than 400px you can remove class itself. So jquery won't work there. Also on jquery code you can check element's or display's width, then decide do action or not. for example: http://jsfiddle.net/thisizmonster/g0x1o9bL/6/ – Gereltod Mar 30 '15 at 07:29
  • I'm still thinking about pure css solution. but not working well. – Gereltod Mar 30 '15 at 07:29
  • Yup css solution should be better. By the way, I tried to resize the browser but the class isn't removed :) – jamez88 Mar 30 '15 at 07:35
  • above version haven't live handler. you have to refresh browser after change size on your browser. This one have listener for resize event: http://jsfiddle.net/thisizmonster/g0x1o9bL/7/ – Gereltod Mar 30 '15 at 07:43
  • I did some research on css solution. It looks like you can't catch parent element from that .right class. so you have to put that class in
    . if it works for you there is some solutions: http://stackoverflow.com/questions/17455811/swap-div-position-with-css-only, http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css
     – Gereltod Mar 30 '15 at 07:49
  • "right" can go with main wrapper. Hope I can able to implement it. :) – jamez88 Mar 30 '15 at 07:57