CODEWITHSUNDEEP
htmlcss
haris
haris

Reputation: 3875

Display 2nd element 1st (CSS)

My code is the following:

<div class="item">
<div class="img">Hello this is img</div>
<div class="text">Hello this is text</div>
</div>

I want it to display it as

Hello this is the text
Hello is the img

I want this achieve without reordering code. Preferably with css. Any ideas?

Upvotes: 2

Views: 429

Answers (4)

user2404546
user2404546

Reputation: 

   .item .text{float:left;display:inline;}
   .item .img{display:inline}

try with css3 transform for vertical alignment

     .item .text{-webkit-transform:translateY(-100%);transform:translateY(-100%);}
      .item .img{-webkit-transform:translateY(100%);transform:translateY(100%);}

fiddle - http://jsfiddle.net/6B7qt/4/

Upvotes: 3

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

The CSS2.1 way (example):

.item { display: table; }
.img { display: table-footer-group; }

Doesn't work only in IE7-. However, some CSS properties like margins, borders etc. won't apply to the element with display: table-*-group, so an extra wrapper may be needed.

Upvotes: 0

Sam Holguin
Sam Holguin

Reputation: 563

Not the cleanest way, but you could always use absolute positioning:

.item {
    position: relative;
    width:500px;
}

.text {
    position: absolute;
}

.img {
    position: absolute;
    top: 20px;
}

Just for the record, I'd look at using some simple Javascript, but this is a dirty hack :)

Upvotes: 1

user123444555621
user123444555621

Reputation: 153026

The sophisticated way to do this is to use CSS flexbox.

.item { display: flex; flex-direction: column; }
.text { order: -1; }

http://jsfiddle.net/gKmwV/1/

However, IE does not support this at the moment, so you'll have to use some hacks. Not sure if a general solution is possible without JS.

Upvotes: 1

Related Questions