Question

I have a page with a text and images inside it, with a style float:right.
I’d like to set max-width for the text, but let the images to go outside the text.

Is it possible to do it with a pure css, without javascript?

This is how I would like to see it on a normal screen and wide screen:

+----------------------+    +-------------------+--------------+
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |     TEXT          |   |  IMG  |  |
|              |       |    |                   |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |     TEXT          |  BACKGROUND  |
|                      |    |                   |              |
|              +-------+    |                   |   +-------+  |
|              |       |    |                   |   |       |  |
|              |  IMG  |    |                   |   |  IMG  |  |
|              |       |    |     TEXT          |   |       |  |
|              +-------+    |                   |   +-------+  |
|                      |    |                   |              |
|  TEXT         TEXT   |    |                   |              |
|                      |    |                   |              |
+----------------------+    +-------------------+--------------+

                            <-----MAX-WIDTH----->

Answer 1

Use CSS3 media queries:

@media screen and (min-width: 600px) {
     .aClass {}
     .anotherClass {}
     /* properties in here only apply when the viewport is wider than 600px */
}

Using this method you can have the text flow around the images by default, but if the viewport is wide then you override that CSS and position the images outside the container div using negative margins or absolute positioning.

More about responsive web design with CSS.