koljanep koljanep - 3 months ago 7
CSS Question

Re-arrange the visual order of elements without changing the HTML

I have the following html code:

<p>some text</p>
<img src="#" alt="image" width="200" height="250" />


I want to pull the text to the right of the image.

I can't find anywhere how to do this with regular CSS without changing the order of the html code.

I tried to use
float:left
on the image but that's only affecting html elements after the image.

What's the right approach?

To be more clear, right now I am getting this:

some text
_____________
| |
| image |
| |
|___________|


What I want is this:

_____________
| | some text
| image |
| |
|___________|

Answer

Switch up the order

<img src="#" alt="image" width="200" height="250" />
<p>some text</p>

then float both the img and the p left

img, p {
    float: left;
}

OR

Keep the order and float both right:

img, p {
    float: right;
}

You will probably need to adjust the width of the element which contains these 2 elements, since it will float it to the far right side of it.

Comments