CODEWITHSUNDEEP
htmlcss
neezer
neezer

Reputation: 20560

CSS Tables, Invert order of displayed content

I know this is a bit bleeding edge, but here's the question anyway:

Given

<div id="one">First Div</div>
<div id="two">Second Div</div>

...

#one, #two { display: table-cell; }

... which gives me a lovely side-by-side arrangement of the div's with #one on the left and #two on the right.

Is there anyway to put #two on the left and #one on the right, using display: table-cell;, and without changing the order of the divs in the HTML?

I ask, because I'd like to keep #one above #two in the HTML for SEO reasons, but I'd like #two to be to the right of #one for aesthetic reasons. I know how to do this using floats/absolute positioning/margins/etc., but I was wondering if there was a way I can do it using the newer CSS table display properties (which I much prefer).

Any thoughts?

Upvotes: 12

Views: 22035

Answers (2)

Imants Volkovs
Imants Volkovs

Reputation: 836

    <div class="container">
        <div class="middle" style="background-color: blue;">
           <h4>Left Col placed middle</h4>
           <p>...</p>
        </div>
        <div class="right" style="background-color: red;">          
           <h4>Middle Col placed right side</h4>
           <p>...</p>
        </div>
        <div class="left" style="background-color: yellow;">
           <h4>Right Col placed left side</h4>
           <p>...</p>
        </div>
   </div>

<style type="text/css">
    .container {
        display: flex;
    }
    .container > .left{
        order:1;
    }
    .container > .middle{           
        order:2;
    }
    .container > .right{
        order:3;
    }

    .left, .middle, .right {
        display:table-cell;         
    }
 </style>

I use flexbox. You can also change count of divs. For example put more divs with left class, then they will be placed left side even if they are declared after.

I tried @Greg example, but it doesn't work on IE.

Upvotes: 2

Greg
Greg

Reputation: 321698

You can (ab)use the text direction warning, evil ahead:

<div id="container">
    <div id="one">First Div</div>
    <div id="two">Second Div</div>
</div>

<style>
    #container { direction: rtl; }
    #one, #two { display: table-cell; direction: ltr;}
</style>

Upvotes: 53

Related Questions