twee kolommen en plaatje onderkant

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedemiddag, ik heb twee kolommen waarbij linker kolom meer tekst bevat dan de rechter kolom.
Bij de rechter kolom wil ik helemaal onderaan een plaatje hebben die op dezelfde hoogte dan staat als het einde van de linkerkolom. Ik hoop dat ik het zo goed uitleg.
Ik heb voor de duidelijkheid een jsfiddle van gemaakt: https://jsfiddle.net/zmt7jhco/

Als ik met position:absolute ga werken dan plakt het plaatje helemaal onder aan het scherm wat ook weer niet de bedoeling is ;-)
zie update jsfiddle: https://jsfiddle.net/zmt7jhco/1/

Thanks allen voor meedenken! :thumb:
 
Hieronder de (responsive!) html en css. Met background kleurtjes laat ik zien hoe het in elkaar zit.
Code: 
<div class="container">
<div class="row clearf">
<br />&nbsp;&nbsp; Vorige div<br /><br />
</div>
<div class="row clearf">
<div class="links">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat non, egestas et diam. Donec eros mi, viverra et dictum id, vulputate vitae leo.</p>
<p>Vestibulum pulvinar facilisis fringilla. Praesent est elit, feugiat eu tempor sed, condimentum sit amet dui. Nulla facilisi. Phasellus sed turpis a erat pellentesque dapibus id ac libero. Etiam risus quam, euismod vitae dignissim non, varius non nisi.</p>
<p>Pellentesque pulvinar tincidunt elementum. Morbi elit sapien, fringilla et placerat eu, blandit ut magna. Cras at dui non mi euismod ullamcorper eu imperdiet justo. Cras odio libero, dapibus eu elementum nec, consequat vitae ligula.</p>
<p>Nulla vehicula tincidunt nibh at commodo. Nullam feugiat sollicitudin diam, id tempor mi venenatis sed. Nulla viverra interdum mauris, eu mattis tellus vehicula ut.</p>
</div>
<div class="rechts">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat non, egestas et diam.</p>
<p>Donec eros mi, viverra et dictum id, vulputate vitae leo. Vestibulum pulvinar facilisis fringilla. Praesent est elit, feugiat eu tempor sed, condimentum sit amet dui.</p>
</div>
<div class="img-bottom">
<img src="photo.jpg" alt="" />
</div>
</div>
<div class="row clearf">
<br />&nbsp;&nbsp; Volgende div<br /><br />
</div>
</div>
Code: 
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font: normal 14px/1.4 'Helvetica',sans-serif;
    background-color: #aaa;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}
p {
    margin: 0 0 10px 0;
    background-color: #ddd;
}
.clearf:before,
.clearf:after {
    display: table;
    content: " ";
}
.clearf:after {
    clear: both;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #ff0;
}
.row {
    /* relative zodat img-bottom absolute kan krijgen */
    position: relative;
    width: 100%;
    margin: 0 0 20px 0;
    background-color: #fff;
}
.links,
.rechts {
    float: left;
    width: 50%;
    padding: 10px;
}
.links > :last-child {
    /* laatste tag uitlijnen met foto */
    margin-bottom: 0;
}
.img-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    /* padding voor uitlijnen met alle tekst */
    padding: 10px;
}
.img-bottom img {
    width: 100%;
}

Suc6. Have fun.
 
Laatst bewerkt:
@bron, top!!!
Het grootste verschil bij jouw code en mijn code is dat ik zie dat je het plaatje in een losse div hebt gezet die je positioneert.
Stel het plaatje staat in de div "class=rechts", lukt het dan ook om hem onderaan te positioneren?
 
Stel het plaatje staat in de div "class=rechts", lukt het dan ook om hem onderaan te positioneren
Klik om te vergroten...

Heb ik geprobeerd maar dat kan niet omdat je "rechts" geen vaste hoogte mag geven (linker tekst heeft namelijk een variabele hoogte). Nu staan links + rechts + plaatje in "container" en dat is de beste manier (cross browser en responsive).

Als de rechter tekst langer wordt dan de linkjer tekst dan heb je denk ik een transparante image nodig die onderaan in div "rechts" komt te staan, maar dat heb ik nog niet getest.
 
@bron, ik snap het, zoiets had ik al gedacht maar wellicht was er toch een oplossing voor.
Hoe dan ook, ik ben weer stuk wijzer geworden en dank je hartelijk voor je hulp! :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan