CODEWITHSUNDEEP
css
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3083

How to position a Div vertically above another Div when in the code the Divs are in the opposite order

For a responsive design change I need to position an image vertically underneath the text instead of vertically on top of it. However I can not change the order of the HTML (note that the image is currently on top of the text when running the following example:

HTML (Also at http://jsfiddle.net/QjV4f/)

<div class="images">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg">
</div>
<div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>

This is what I'd like to achieve (this is a PNG attachment mockup): enter image description here

Upvotes: 2

Views: 1910

Answers (6)

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Here's one way to re-order HTML elements using CSS which works in newer browsers which support flexbox, this includes iOS, Android and Windows Phone browsers (the usual targets for this kind of responsive design):

body {
    display: flex;
    flex-flow: column;
}
div.images {
    order: 2;
}

Here's a jsFiddle.

Upvotes: 1

Jamie Collingwood
Jamie Collingwood

Reputation: 689

I think what Vivek means is using the position attribute. Is there a parent div above the .images and .text divs? A container div of some sort? If so you can set the parent to position:relative and .images and .text to position:absolute and then use css to position them. Otherwise you can set the position:absolute to both divs and it will be absolute to its parent or to the body tag.

Upvotes: 0

Jeremy Carlson
Jeremy Carlson

Reputation: 1273

You may be able to use display: table-caption, depending on your circumstances.

You would need to wrap .images and .text in some sort of containing element, which we give display: table and caption-side: top. Then add display: table-caption to your .text div and it should work like a charm.

This assumes that the faux table element does not have other issues, like not playing well with its siblings.

The HTML looks like this:

<div class="wrap">
    <div class="images">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg"/>
</div>

<div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>

</div><!-- close wrap -->

CSS looks like this:

.wrap {
    display: table;
    caption-side: top;
}

.text { display: table-caption }

Here is a fiddle: http://jsfiddle.net/eyesofjeremy/QjV4f/3/

This is based on brilliance from Jeremy Keith and I've used it successfully for a live site. You'll need to enclose the CSS in the appropriate responsive media query, of course.

Upvotes: 3

Arkana
Arkana

Reputation: 2889

Well, this solution makes you work a little: http://jsfiddle.net/QjV4f/2/

I float the image (to cause the flow break) and positioned it manually (in this case at 5em to top).

Then, cause the flow break in the text (with position:absolute).

The problem with this, as you sure noticed, it's that it isn't an usefull solution if your text is dynamic.

But if the text have a fixed lenght, you could start adjust some mediaqueries to increment the margin-top in other resolutions.

You can use the "float / margin-top" trick as well as "position:absolute / top:x", both works.

Perhaps that's a little dirty solution... but without changing html or use javascript I can't think another.

Upvotes: 0

mercredo
mercredo

Reputation: 158

how about this:

Use a tiny Css-WrapperClass and change its value to display:none; or "display:block;", if necessary.

.someImg
{
background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);width:200px;height:150px

}

._imageNormal
{
display:block;
}

._imageMobile
{display:none;}


<div class="images top">
<div class="someImg _imageNormal"></div>
</div>
<div class="text center">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>
<div class="bottom someImg _imageMobile"></div>

It works as a switch for classes _imageNormal and _imageMobile.

EDIT:

http://jsfiddle.net/kHk3B/

Upvotes: 0

taxicala
taxicala

Reputation: 21769

Try floating the text left, and setting 

width: 100%;
display: block;

and the image with float: none;

Maybe this helps.

Upvotes: 0

Related Questions