How to interchange table cells using Pure CSS

Question

I was looking if any one know how to interchange table cells positions using pure CSS. I have three divs similar to below

#content {
  width: 1000px;
  display: table;
  float: none;
  vertical-align: top;
  border: 1px solid red;
}
#left {
  float: left;
}
#right {
  float: right;
}
#left, #right {
  width: 200px;
  display: table-cell;
  right: 600px;
  border: 1px solid grey;
}
#middle {
  width: 600px;
  display: table-cell;
  float: left;
  border: 1px solid grey;
  margin-left: 200px
}

<div id="content">
  <div id="left">some text and divs inside</div>
  <div id="right">some text and divs inside</div>
  <div id="middle">SOme more text and divs inside</div>
</div>

While loading the page, middle part flickers. So I am looking for a big help to interchange the positions of left and right using pure CSS.

Why do you think changing the position/order of the `div` elements will address the problem of the 'flicker' (assuming that *is* the problem you're trying to deal with)? — David Thomas, Aug 12 '13 at 17:31
@David, thank you for ur fast response, Actually this is my last attempt. thing is the middle div has lot lots of content assume something like facebook. I have some php code to change the width of the middle content depending on some text inside. — Yellow and Red, Aug 12 '13 at 17:39
If you float a table-cell element, it stops being a table-cell. — cimmanon, Aug 12 '13 at 18:04
Possible duplicate of [How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?](http://stackoverflow.com/q/31059124/1529630) — Oriol, Jan 02 '17 at 23:00

score 0 · Accepted Answer · answered Aug 12 '13 at 17:48

Below code worked for me. Code concept took from Facebook after talking to David in comments. Thanks to him..

<div id="content">
      <div id="left">some text and divs inside</div>
      <div id="rightPart">
        <div id="right">some text and divs inside</div>
        <div id="middle">SOme more text and divs inside</div>
      </div>
    </div>


<style>
    #content{
          width: 1005px;
          display: table;
          float: none;
          vertical-align: top;
          border: 1px solid red;
        }
        #left{
          float:none;
        }
        #right{
          float:right;
        }
        #rightPart{
          float: none;
          vertical-align: top;
        }
        #left, #right{
          width: 200px;
          display: table-cell;
          border: 1px solid grey;
          vertical-align: top;
        }
        #middle{
          width: 600px;
          display: table-cell;
          float: none;
          border: 1px solid grey;
        }
        </style>

How to interchange table cells using Pure CSS

1 Answers1