Complex DIV positioning

Question

I'm trying to achieve a particular layout using the least number of containers as possible, but am stumped as to whether or not this can be done. The layout is shown below:

....................
....................
           .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||           
||||||||||||||||||||
||||||||||||||||||||

Now, I understand that the spacing between the two components can be achieved using appropriate padding on the top and right of the ||| content and the bottom and left of the ... content.

However, is there a way to use only 2 major containers and achieve such a layout? It can be assumed that the content of the two containers will be text exclusively, and that the width of the overall container is fixed.

That is, I'm looking to have a structure that looks something like:

<div class="content" width="800px">
    <div id="content-a">
        ..............................................
    </div>
    <div id="content-b">
        ||||||||||||||||||||||||||||||||||||||||||||||
    </div>
</div>

where appropriate styling and positioning have been assigned to content-a and content-b to result in the shown layout. The exact nesting of the DIV's is not important, but limiting it to 1 DIV per piece of content is.

score 1 · Accepted Answer · answered Feb 28 '11 at 02:55

1

The only way I see this possible is by using absolute position, one on top of the other, and a transparent image in both divs taht will make the text wrap around it

....................
....................
           .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........

In content-a, the | would be the transparent image.

In content-b, the . would be the transparent image.

|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||  .........
|||||||||           
||||||||||||||||||||
||||||||||||||||||||

Then you position content-b on top of content-a

answered Feb 28 '11 at 02:55

Rafal

2,576
2
18
13

@Rafal How to make the text wrap around the image that is in the lower left corner of the DIV? – Šime Vidas Feb 28 '11 at 03:09
@Rafal I am able to produce a rectangular hole in the upper left or right corners of the DIV ([See here](http://jsfiddle.net/simevidas/GZZZs/3/)), but how to make the hole stick to the bottom of the DIV? – Šime Vidas Feb 28 '11 at 03:19
1

It seems impossible indeed. http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div – Rafal Feb 28 '11 at 03:38
@Rafal before I settle for impossible, though, I do want to know what options, however ugly, may exist. As I mentioned, I do know the exact size of the entire block: it will be, for example, fixed at 800x1000. That might help, but I'm not familiar enough with the intricacies of layouts to be sure. – Elie Feb 28 '11 at 03:45
Another question: with your system of blank images, how would I ensure that the text in each DIV is selectable? I can't seem to adjust the z-index such that all text has a higher z-index than the images. – Elie Feb 28 '11 at 04:14
By the way, I don't need to put images at the bottom - just keep floating left, and as long as the images are all consecutive, they'll stack up down the left side of the page. Nice solution, just have the z-index issue and I'm done. – Elie Feb 28 '11 at 04:22

Complex DIV positioning

1 Answers1