How to set a floating div at the bottom left of my content?

Question

i'd like to be able to position a div at the bottom left of my content (just like div n°2 on this wireframe).

The trick is i'd like to do it WITHOUT having to insert it manually inside the "content" div.

(context : I have more than 500 wordpress posts where i'd like to do that, and the manual insert solution seems painful and approximative at best).

I tried using position:absolute;bottom:0px; but if I do that, div 2 is on top of my content and masks some of my text content.

Any clue about how I could align div2's bottom to the exact bottom of my content ? With Jquery maybe ?

Here's an overview of my HTML code.

<div class="contenu">
    <div id="1"><img class="ad_300x250" style="float:left; margin:0 10px 0 0;" src="300x250_3.jpg" /></div>
    <div id="2"><img class="ad_300x250" src="300x250_3.jpg" /></div>
    <p>Loin, très loin, au delà des monts Mots, à mille lieues des pays Voyellie et Consonnia, demeurent les Bolos Bolos. Ils vivent en retrait, à Bourg-en-Lettres, sur les côtes de la Sémantique, un vaste océan de langues.</p>
            <p>Un petit ruisseau, du nom de Larousse, coule en leur lieu et les approvisionne en règlalades nécessaires en tout genre; un pays paradisiagmatique, dans lequel des pans entiers de phrases prémâchées vous volent litéralement tout cuit dans la bouche. Pas même la toute puissante Ponctuation ne régit les Bolos Bolos - une vie on ne peut moins orthodoxographique.</p>
            <h2>Titre 2 </h2>
            <p>Un jour pourtant, une petite ligne de Bolo Bolo du nom de Lorem Ipsum décida de s'aventurer dans la vaste Grammaire.</p>
            <h3>Titre 3 </h3>
            <p>Le grand Oxymore voulut l'en dissuader, le prevenant que là-bas cela fourmillait de vils Virgulos, de sauvages </p>
            <h2>Titre 2 </h2>
            <p>Pointdexclamators et de sournois Semicolons qui l'attendraient pour sûr au prochain paragraphe, mais ces mots ne firent écho dans </p>
            <ul>
                <li>
                    l'oreille du petit Bolo
                </li>
                <li>
                    qui ne se laissa point déconcerter.
                </li>
                <li>
                    Il pacqua ses 12 lettrines, glissa son initiale dans sa panse et se mit en route.
                </li>
            </ul>
            <p>Alors qu'il avait gravi les premiers flancs de la chaîne des monts Italiques, il jeta un dernier regard sur la skyline de Bourg-en-Lettres, sa ville alphanatale, la headline d'Alphabetville, la subline de sa propre rue, le passage Motus. Le coeur lourd et nostalgique, une question rhétorique lui coula le long de la joue, puis, il se remit en route. </p>
            <p>En chemin, il rencontra un Copy. Le Copy prévint le petit Bolo que là d'où il venait, il avait déjà maintes et maintes fois été ressaisi, et que tout ce qui désormais restait de leurs origines était le mot "et", et que le petit Bolo ferait bien de se raviser, rebrousser chemin et retourner en son sain et sauf bercail. Mais toutes bonnes</p>

            <p>Alors qu'il avait gravi les premiers flancs de la cha&icirc;ne des monts Italiques, il jeta un dernier regard sur la skyline de Bourg-en-Lettres, sa ville alphanatale, la headline d'Alphabetville, la subline de sa propre rue, le passage Motus. Le coeur lourd et nostalgique, une question rh&eacute;torique lui coula le long de la joue, puis, il se remit en route.</p>
        </div>

Answer 1

Just use float: left exactly how you would for div1, but place div2 just before your last paragraph of text.

So...

<div class="wrapper">
   <div class="left1">
   <!-- DIV 1 -->
   </div>

   <p>Paragraph 1</p>

   <!-- more in the middle -->

   <p>Paragraph 5</p>

   <div class="left2">
   <!-- DIV 2 -->
   </div>

   <p>Paragraph 6</p>
</div>

Answer 2

Fixing with a CSS rule

Targeting your comment :

`context : I have more than 500 wordpress posts where i'd like to do that, and the manual insert solution seems painful and approximative at best

You may combine a pseudo element and a nth-child selector (please check full browser support)

Only fixture to fix is that a very large ending paragraph will set aside your float one or more lines from bottom. Not a big issue I suppose.

Anyway, using this pseudo you will be able to locate your second div with the css forgetting about the markup. You could use the img tag or the background for image purposes I stated :before so the image will be wraped by the text of the last paragraph. in my example I used a color background and a fixed size in order to see the pseudo element

.contenu p:nth-last-child(1):before {
    content:" ";   /* Or the image */
    display:block;
    width:200px;
    height:100px;
    background:#ff0000;  /* or the image */
    float:left;

}

See a fiddle here Of course div id ="2" is not longer required.

By the Way and Important: Not all parsers will be happy with an id starting with a number!!