CSS styling: move div tag position via CSS

Question

I have a div container that displays content depending user status (logged in, anonymous). On each case, I need to move the bottom div below the content div, via CSS only. For example, for logged in user, I need to display both divs (.loggedInBottom, and .loggedIn), and .loggedInBottom div below .loggedIn div. I cannot move the div, but can change CSS to do so.

Both *Bottom divs need to have the same background colour as the container.

Web browser support: IE9+, FF, Chrome.

Any idea? Please provide cod. thanks.

 <style type="text/css">
        /*
        Problem:
        1: When loggged in, 1 needs to move below 4 via CSS only, not move div tag
        2: Same as 1 above, Wwen not logged in, 2 needs stop move below 3 via CSS only

        */        
          .hide {
              display: none;
          }
          .container{
              background-color:grey;
              width: 300px;
              height: auto;
          }
          .loggedIn{ 
              height: auto;       //the height varies from time to time
           }
          .loggedInBottom{}

          .anonymous{}
          .anonymousBottom{}
 </style>
  
 
      <p>Logged In</p>
      <div class="container">
          <div class="loggedInBottom">bottom: When users are logged</div> <!--1 needs to move below 4 via CSS only-->
          <div class="anonymousBottom hide">bottom: anonymous users</div> <!--2 -->
          <div class="anonymous hide">Content: anonymous users</div> <!--3 -->
          <div class="loggedIn">content: When users are logged. the height varies from time to time</div> <!--4 --> <!-- need to move this div tag to above 1 via CSS only  -->
      </div>

      <p>anonymous users</p>
      <div class="container">
          <div class="loggedInBottom hide">bottom: When users are logged</div>
          <div class="anonymousBottom">bottom: anonymous users</div> <!--2 needs to below 3 via CSS only-->
          <div class="anonymous">Content: anonymous users</div> <!--3 -->
          <div class="loggedIn hide">content: When users are logged</div>
      </div>

You can definitely change the order of divs thanks to the flexbox spec and the `order` property. Something similar to this answer: http://stackoverflow.com/questions/32829567/change-div-order-with-css-depending-on-device-width/32829829#32829829 but make it contingent upon some JS trigger rather than device-width. — TylerH, Feb 20 '17 at 20:35
IE9 usage: `0.27%`. Really? It's been dropped by everyone, including Bootstrap v4. Microsoft will drop it in a few months, as they already dropped support for IE8. You know what that `0.27%` really is? It's website owners checking to see if their website works in IE9. Nobody uses it on a daily basis, as their default browser. If the client asks for it, you should charge double. On principle. But than again you might want to code support for it *yerself*. Blink. — tao, Feb 20 '17 at 20:45
@PingPong Firefox and Chrome, yes, but IE9 is a defunct browser; you should not be developing for it anymore. If you must, then you will need to find JavaScript libraries (small, single-purpose libraries are often called shims) to solve this, or just write some custom JavaScript to do it. — TylerH, Feb 20 '17 at 20:45
@Pingpong The most common 'css feature support' website is http://caniuse.com however you should not consider supporting anything below IE11. Even IE11 is at the 'critical security updates only' point in its life span now. No version of Internet Explorer will ever again receive new support for any new technology. Microsoft is retiring Internet Explorer in favor of its new, Windows 10 browser, Edge. — TylerH, Feb 20 '17 at 20:49
@TylerH thanks. In this case, probably javascript is the only option. — Pingpong, Feb 20 '17 at 20:55
@Pingpong: the problem is really simple: can you determine via CSS if your users are logged in? If yes, it can be done. If no, it can't. And, in reality, it can't. You need server side. You need to have that information in markup, (by using a class?) provided by either `php` or, later on, via an ajax call, by `javaScript`. But you can't authenticate users through CSS. — tao, Feb 20 '17 at 21:00

Gwellin · Accepted Answer · 2017-02-20T22:22:17.197

0

This is a tricky request, depending a lot on how your page is built. It is possible to set some CSS to move the one element.

.container {
  position: relative;
}
.loggedInBottom, .anonymousBottom {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background-color: inherit;
}

The above might cover up some other content of the page if this isn't right at the bottom. If so, you will need to play around with margin-bottom on .container.

edited Feb 20 '17 at 22:22

answered Feb 20 '17 at 20:55

Gwellin

484
1
4
8

do you mean applying CSS style to loggedInBottom class? Only .loggedInBottom div needs moving for logged in user. – Pingpong Feb 20 '17 at 21:00
only .loggedIn div can has fixed height, the rest should have auto height. – Pingpong Feb 20 '17 at 21:05
I confused myself when I used the wrong class. I have updated my answer again, though without fixed height it is not possible to dynamically account for any content following the container which might get covered up. – Gwellin Feb 20 '17 at 21:19
Now both .loggedInBottom, .anonymousBottom divs are moved below container, and do not share container's properties. Both *bottom divs need to have the same CSS properties as container's (background colour, and width).Is it possible to do this without declaring the same properties (colour and width) in both *Bottom classes? Ideally, these properties should only be declared in the .container class. any idea? – Pingpong Feb 20 '17 at 22:18
I should have thought of the width when I wrote this code, which I achieved through `right` and `left` values of 0. As for the `background-color`, a simple `inherit` works wonders. I have edited the answer to reflect this. – Gwellin Feb 20 '17 at 22:23

CSS styling: move div tag position via CSS

1 Answers1