How to interchange table cells using Pure CSS


Tags: css,table,html,positioning,css-position

Problem :

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

HTML

<?php ?>
<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>

#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
}
</style>

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.



Solution :

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>

    CSS Howto..

    How to ensure broswer does not cache my JS/CSS [duplicate]

    How to change background color for only one bootstrap popover

    how to make div fixed at a particular scroll level

    show play icon on image hover

    How to create a list with 'pinned' items

    How to incrementally increase the value of a css property every click?

    How to test a CSS parser?

    How to separate css style from common to different statement

    How can I add more images to my HTML5/CSS3 Slideshow

    How do I edit the VIM Omni Completion so that all CSS properties do not end in a colon?

    How to make the page to fit screen width on mobile device?

    How to detect DOM element position to use different CSS style via CSS selection

    How can I add text right next to (to the right of) an ellipsis text overflow in CSS?

    How to tilt inner element forward when tilting outer back with css 3d transforms

    html/CSS how to make a div always center when the window is resized [duplicate]

    How to set div using Z-index and fix css

    How do I uncollapse a margin?

    How to remove the gap between each list-item in an unordered list?

    version control: how to control css and js compressed/minified versions between environments

    How to expand textarea to fit text vertically and horizontally?

    how to style every html posts differently in css

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    How to make a parent object in CSS menu stay in hover state when children are hovered over

    how to make a line between div boxes - simple timeline experiment

    How to add static files using Spring MVC and Thymeleaf

    How to change the input field's text color in MaterializeCSS?

    Possible to code a search box that searches for a specific tag in a div and then shows it / hides others? [closed]

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How to scale an element when it loads using only CSS?

    How to put the menu over the content?