Div til højre der flytter andre elementer (med float)

Ret mange af os har prøvet det med at vi gerne vil have noget til at stå til højre og fylde mere end "det almindelige" indhold og man så har noget indhold længere nede der skal flyttes af det indhold til højre.


Et lille eksempel kan være min detaljeside for en ansættelse.
Der står firma navn og titel i toppen, en kortere beskrivelse, og så nogle info-bokse der fortæller hvor mange kurser, certificeringer, projekter, anbefaling(er) jeg har fået under denne ansættelse og alt der ellers kan være interessant.

Til højre skal der så vises logo, firma bygning, adresse og firma information, og nederst kontaktinformation på den man bør kontakte hvis man skal snakke om denne ansættelse.

Problemet med dette er at højre side meget nemt bliver meget større og længere end venstre, og da man ofte ville bruge float:right ville denne ikke flytte en eventuel footer- nederst på siden.

DOG er der en måde at få dette gjort på..
Hvis du laver en div, med display:inline-block så vil denne og dens indhold flytte de andre elementer.
Derefter laver du en div som er din right-part - altså den div der skal have indholdet til højre side. Denne right-part skal du have som float:right og skal være det første element i din left-part (den første defineret med display:inline-block).
Nedenunder denne right-part vil du sætte alt det indhold der skal være i left-part.

Og det der vil ske er at selvom du fylder mere indhold i right-part end det din left-part fylder vil din right-part nu udvide din left-part da den er indeni den og left-part har defineret display:inline-block.
Dermed kan du have noget til at stå til højre og fylde mere end venstre side og stadig have indflydelse på dine andre elementer.

Se komplet virkende eksempel her: http://jsfiddle.net/ceT2j/2/
og læs om samme problematik på udvikleren.dk her: http://www.udvikleren.dk/forum/38490/div-til-hoejre/side2/

<style>
    .company-container
    {
        /* position: relative; */
    }

    .left-part
    {
        min-height: 100px;
        margin-right: 15px; /* background-color: Green; */
        display: inline-block;
        padding-left: 20px;
    }
   
    .right-part
    {
        /* background-color: pink; */
        border: 1px solid lightgray;
        padding: 15px;
        min-height: 100px; /* height: 100%; */ /*width: 20%;
           display: inline-block; */
        width: 300px;
        float: right;
        margin-left: 25px;
    }
</style>

<div class="company-container">
    <div class="left-part">
        <div class="right-part">
            <div>First line in right</div>
            <div>Second line in right</div>
            <div>Third line in right</div>
         </div>
    <span>Her kommer din tekst i venstre side og går selv ned på næste linie automatisk når der ikke             er mere plads fordi højre side fylder mere. Det er rigtigt smart.
            yada yada yada yada yada yada yada yada yada yada
            yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
            yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
            yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
            yada yada yada yada yada yada yada yada yada yada yada
    </span>
    <div style="text-align:center">Mere information her i venstre side</div>
    </div>
</div>