Position of Div Container

Question

I have the following HTML code:

<div class="item">
    <div class="pageheader">
        Header
    </div>
    <div class="info">
        Created on...
    </div>
    <div class="image">
        Image
    </div>
    <div class="more">
        Read More...
    </div>
</div>

I can't change the order of the Elements and want to position it in this way without position absolute:

Div Position

Is there a way to do that so?

I can use jQuery, but I can't do changes in the html code because its auto generated from a Joomla Module and so I only can do changes in the css part. — user2025830, Aug 22 '14 at 08:42
@singe31 Why do you want to use jQuery to place div in correct position? You can easly do it with CSS — Piotrek, Aug 22 '14 at 08:43
Considering this answer http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css , flexbox is the solution to change the order of your blocks. But it's a new CSS property so it's not supported in older browsers http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css . There is also a nice trick here that is cross browser I think http://stackoverflow.com/a/25309319/3805954 — singe3, Aug 22 '14 at 09:02

Dexkill · Accepted Answer · 2014-08-22T09:06:21.633

EDIT:

.item{

    width: 400px;
    height:  100px;
    border: 2px solid black;
    position: relative;
}

.image{

    float: left;
    border-right: 2px solid black;
    height: 100px;
    width: 100px;

}

.pageheader{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 298px;
    top: 33px;
    left:102px;
    position: absolute;
}

.info{

    float: right;
    border-bottom: 3px solid black;
    height: 30px;
    width: 298px;
    top: 0px;
    left:102px;
    position: absolute;
}

.more{

    float: right;
    height: 30px;
    width: 298px;
    top: 66px;
    left:103px;
    position: absolute;
}

CSS solution, should work now.

thanks. but the info part should be over the pageheader – user2025830 Aug 22 '14 at 08:49 — user2025830, Aug 22 '14 at 08:49

Position of Div Container

1 Answers1