CODEWITHSUNDEEP
htmlcss
Jin Kim
Jin Kim

Reputation: 17732

Is it possible to flow HTML elements up using CSS?

I have the following piece of HTML:

<html>
    <head>
        <style>
            .part { background-color: blue; width: 40%; float: right; }
        </style>
    </head>
    <body>
        <div>
            <div class="part">Hello World 1 </div>
            <div class="part">Hello World 2</div>
            <div class="part">Hello World 3</div>
            <div class="part">Hello World 4</div>
        </div>
    </body>
</html>

Right now the text is flowing to the right (good) and down (bad). Is it possible to flow to the right and up?

The current version looks like:

[Hello World 1][Hello World 2]
[Hello World 3][Hello World 4]

The final version should look like:

[Hello World 3][Hello World 4]
[Hello World 1][Hello World 2]

Upvotes: 4

Views: 783

Answers (4)

Brian Phillips
Brian Phillips

Reputation: 4425

Here's a solution I worked up. It's a bit of a messy solution - it uses absolute positioning ,:nth element, pixel-based margins, and an !important tag to override inline styles.

However, there's no need to change the HTML markup at all. This can all be achieved through a linked stylesheet.

Here's the CSS:

div {
  position: relative;
  width: 50%;
  float: right;
}

.part {
  width: inherit !important;
}

.part:nth-child(1),
.part:nth-child(2) {
  float: left;
  margin-top: 20px;
}

.part:nth-child(3),
.part:nth-child(4){
  position: absolute;
  float: left;
}

.part:nth-child(4) {
  right: 0;
}

Upvotes: 1

Spudley
Spudley

Reputation: 168685

One slightly cheeky way to do this would be to rotate both the outer div and the inner divs by 180 degrees.

Rotating the outer div will mean the elements are upside-down but shown in the order you want them.

Rotating the inner divs will put them back the right way up while keeping them in the reverse order.

The whole code is as simple as this:

.outer, .part {
    transform:rotate(180deg);
}

Yes, it's a very very cheeky hack. It's certainly not efficient in terms of processing power. And it just feels wrong. But you know... it works.

Here it is in action in a fiddle: http://jsfiddle.net/zW4TR/

(note: you may need vendor prefixes on the transform style for some browsers, and also note that it won't work in IE8 or earlier as it doesn't support transforms. (there is a way of rotating in IE8, but it it's pretty ugly and quirky, and I would worry about how well they'd work with rotations inside rotations)

Upvotes: 7

cimmanon
cimmanon

Reputation: 68319

You can do this without modifying your markup, but support is extremely limited due to the fact that only 3 browsers support wrapping in Flexbox: Opera, Chrome, IE10.

CODEPEN

Just added a class here for simplicity:

<div class="container">
    <div class="part">Hello World 1 </div>
    <div class="part">Hello World 2</div>
    <div class="part">Hello World 3</div>
    <div class="part">Hello World 4</div>
</div>

CSS:

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}

.part {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
}

Upvotes: 4

maja
maja

Reputation: 18044

I tried your code on my own, and it seems that it's working correctly. Element 1 and 2 are on the upper side (tested on chrome and firefox).

However, here are some possible solutions:

The easiest way would be to change the order of the elements:

<div>
     <div class="part">Hello World 3</div>
     <div class="part">Hello World 4</div>
     <div class="part">Hello World 1 </div>
     <div class="part">Hello World 2</div>
</div>

But I guess that's not what you are looking for.

Another solution would be to put the divs inside another parent-div: 

<div>
     <div class="part">Hello World 1 </div>
     <div class="part">Hello World 2</div>
</div>
<div>
     <div class="part">Hello World 3</div>
     <div class="part">Hello World 4</div>
</div>

If you aren't able to change the HTML-Code, there might be some special CSS3-selectors wich might fit, but I cant test it, because it's already working for me.

Upvotes: 0

Related Questions