image always in the top right corner of the second column in 2 multi-columns div
Asked Answered
H

2

8

I have a div with column-count: 2. I have also an img inside of it.

I would like to see this image always in the top right corner of the second column.

How can I achieve this? I know I can use position: absolute for the img, but then the text is not visible (it is under the image).

I thought also about padding-top of the second column but from what I know this is not possible.

My code:

<div style='-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;'>
  <img source='http://tny.im/50D'>
  <p>Ca. 1500 words (...)</p>
</div>

Expected behavior: Image always in the top right corner of 2-columns div

Hooghly answered 5/7, 2016 at 20:12 Comment(0)
C
8

You can achieve this with a mix of flexbox and position:

  • set position:relative to your div parent and give the padding-top (same as image height)
  • wrap your img in an element, can be p to be the same as the text.
  • set position:absolute with top:0 and right:0 to img
  • put your 1500 words in a single p
  • remove the extra padding-top, by adding margin-top: (- same value as padding-top) to p that has the text.
  • set display:flex to that p which has the text.

This last one, messes with Firefox, so a possible solution to be cross browser is apply a Firefox CSS only property, overriding the display:flex with the default display:block


Works in Chrome, Firefox (in Edge as @lexith Mentioned | in Safari as @mmgross mentioned)


Notes:

  • Avoid inline styles
  • In img the attribute is src and not source.

div {
  position: relative;
  width: 500px;
  padding-top: 360px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2
}
div img {
  position: absolute;
  top: 0;
  right: 0
}
div p:nth-of-type(2) {
  margin-top: -360px;
  display: flex
}
/* FF won't work 100% without this hack */

@-moz-document url-prefix() {
  div p:nth-of-type(2) {
    display: block
  }
}
<div>
  <p>
    <img src='http://tny.im/50D' />
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis commodo elit, nec feugiat tellus. Fusce sollicitudin erat quam, at gravida ligula vestibulum quis. Integer ultricies cursus velit, eu accumsan ligula facilisis quis. Sed sollicitudin et
    ante quis molestie. Suspendisse vitae cursus augue. Cras varius, neque non malesuada pharetra, purus dui sodales lectus, at rutrum dui libero sit amet risus. Maecenas id laoreet massa. Nunc sed nibh eu libero egestas dignissim sit amet eget velit.
    Ut tincidunt, tortor id malesuada elementum, massa lectus fringilla nulla, et elementum velit lacus id eros. Nulla lacinia erat eu est euismod, quis venenatis orci luctus. Nullam vel vestibulum lectus. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Curabitur finibus blandit nisl vitae rutrum. Morbi laoreet lacus enim, a iaculis dui scelerisque non. Pellentesque vulputate ut tortor vel iaculis. In eu lacus condimentum, semper felis ut, pellentesque
    ligula. Nullam vestibulum ligula sit amet elit imperdiet, et feugiat lorem pharetra. Donec vel eros vestibulum, fermentum odio sit amet, rutrum justo. Integer finibus at tellus bibendum eleifend. Nullam rhoncus aliquet purus, in maximus nulla dignissim
    eget. Phasellus dignissim lacus in auctor viverra. Integer sed eros dolor. Fusce varius eros ac ante tincidunt molestie vitae ac leo. Sed vulputate finibus enim in auctor. In elit velit, elementum ut condimentum ac, suscipit nec libero. Suspendisse
    non dui molestie mi fringilla imperdiet a eget elit. Maecenas semper, metus at vulputate vestibulum, nulla odio ullamcorper leo, vitae sodales sapien eros id ex. Mauris consectetur fermentum sem. Pellentesque aliquam, justo at fermentum consequat,
    diam sapien dictum lacus, eget gravida nisl neque eget urna. Praesent maximus molestie neque, ut feugiat mauris fringilla ut. Quisque sed cursus massa. Praesent tincidunt risus eros, a elementum sapien vestibulum sit amet. Suspendisse potenti. Donec
    dignissim aliquam metus, id tristique metus hendrerit a. Vivamus semper ante sed erat aliquam, sed faucibus libero mollis. Proin ultricies enim at felis ultrices pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis
    magna vitae lorem congue, eu bibendum lectus auctor. Etiam nec ex eget dui aliquet consequat. Aenean sed lectus laoreet, lobortis nisi sed, ullamcorper sem. Morbi non blandit arcu. Curabitur libero nisl, convallis at magna sit amet, ornare egestas
    nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sit amet risus pulvinar, maximus ex at, rhoncus nulla. Praesent vel finibus diam, eu rutrum risus. Nulla gravida pulvinar lacinia. Phasellus erat nunc,
    luctus id fringilla gravida, venenatis dignissim augue. Aliquam enim ante, cursus vel sem vel, vehicula posuere leo. Maecenas purus quam, lacinia ut diam ac, bibendum gravida leo. Quisque sollicitudin purus et mollis tincidunt. Ut condimentum eros
    id pellentesque elementum. Integer in tellus pulvinar, convallis lectus nec, ultrices est. Sed scelerisque aliquet pretium. Duis tempor, quam auctor lacinia semper, dolor turpis posuere ligula, id feugiat ex mi cursus tellus. Class aptent taciti sociosqu
    ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ultrices porta turpis, id egestas turpis rhoncus et. Proin vel pharetra mauris, vel hendrerit nisl. Ut cursus odio eu scelerisque aliquam. Sed vel velit pellentesque, varius ligula
    gravida, semper purus. Nam a risus cursus, gravida lacus a, pellentesque mauris. Sed ullamcorper nec elit eu interdum. Aliquam tortor quam, iaculis vitae finibus vitae, varius ut turpis. Sed iaculis dignissim mauris, id cursus dolor commodo dapibus.
    In dignissim eget diam sed condimentum. Praesent nec lectus nec nisi vehicula convallis. In sagittis magna at diam aliquam, ut ultricies odio molestie. Duis viverra eleifend sollicitudin. Sed vel velit turpis. Curabitur non facilisis felis. Nunc vitae
    lacinia elit. Aliquam fringilla bibendum ipsum, vel posuere mi tincidunt id. In vulputate, diam non aliquam congue, mi mi condimentum leo, id ultricies lacus odio nec metus. Ut euismod nisi tellus, at congue magna blandit vitae. Phasellus iaculis
    dolor ornare leo eleifend molestie. Morbi lorem sem, pretium vitae tincidunt eget, vulputate sit amet turpis. Praesent sagittis dignissim suscipit. Nulla maximus elit sed felis interdum consequat eget id dui. Aliquam mollis semper lobortis. Aliquam
    porta eu est vitae vehicula. Maecenas pretium tincidunt ipsum non vestibulum. Nullam vitae nibh diam. Nam efficitur bibendum nibh, et scelerisque libero tempus quis. Nam ac finibus lectus, non dictum diam. Morbi vel rutrum turpis, in tempor risus.
    Aliquam consequat lectus sed nisi consectetur, ut imperdiet lacus consequat. Nam ut luctus lectus. Nulla arcu neque, dapibus faucibus velit ac, ultricies tincidunt enim. Donec vitae tristique odio. Quisque vel congue nunc. Maecenas lacinia arcu in
    justo semper, ut dictum elit mollis. Morbi ut enim metus. Pellentesque ullamcorper, metus ut tristique rhoncus, lacus eros eleifend lacus, eget ultricies urna lorem at orci. Aenean et lobortis lectus. Nullam malesuada dui mi, ut congue lorem tincidunt
    id. Maecenas fringilla ante ut iaculis aliquet. Praesent lacinia arcu id lorem ultrices, posuere pharetra lorem imperdiet. Phasellus in viverra leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. In volutpat ligula non pretium scelerisque.
    Praesent at tellus nunc. Aliquam pulvinar, tortor vitae tincidunt tincidunt, urna nibh facilisis elit, et commodo mauris magna ac augue. Phasellus et elit sed turpis volutpat laoreet ut ut enim. Duis a turpis leo. Etiam suscipit nec risus ac ultricies.
    Vivamus eu erat luctus, fringilla purus ut, elementum tortor. Nulla ullamcorper lectus vitae risus porta volutpat. Curabitur vestibulum sit amet dolor sed laoreet. Suspendisse consectetur ultrices mauris non pellentesque. Aenean ipsum mi, tincidunt
    nec nibh sed, pharetra lacinia mi. Donec condimentum tincidunt ligula et efficitur. Integer vitae porta enim, sit amet mattis magna. Nam vitae bibendum lectus. Proin rhoncus tortor felis, at egestas mauris lobortis vitae. Morbi ullamcorper sem non
    augue venenatis finibus. In facilisis justo eu leo suscipit, sed tempor justo tempor. Mauris magna nisi, auctor at turpis a, feugiat porta leo. Sed vestibulum, neque in malesuada molestie, orci erat suscipit sem, euismod finibus est sapien eu nulla.
    Nam maximus rhoncus venenatis. Nullam hendrerit, lacus et congue commodo, nibh massa interdum mauris, eget accumsan nisi nulla quis tellus. Vestibulum vel viverra sapien, ut tempor eros. Morbi euismod scelerisque posuere. Fusce imperdiet, est a consequat
    fermentum, tortor quam ullamcorper ligula, consequat luctus augue risus in eros. Vestibulum urna lorem, scelerisque id urna at, rutrum imperdiet ipsum. Quisque nec scelerisque ipsum. Vestibulum est felis, vehicula ut augue ac, elementum tempor quam.
    Morbi tempor accumsan est in volutpat. In tempor lacus augue. Nullam gravida tortor sit amet est ullamcorper, ornare viverra arcu egestas. Suspendisse accumsan nibh quam, scelerisque tempor augue aliquam ac. Aliquam ut lorem tempor mauris maximus
    aliquet. Curabitur vehicula arcu ac lorem elementum, eu laoreet odio suscipit. Nullam mattis dui at lorem egestas fermentum. Sed faucibus gravida erat, sit amet egestas enim faucibus ac. Etiam at condimentum velit. Donec quis dolor ut nibh dictum
    pellentesque. Maecenas sagittis eget nisl eu posuere. Cras tincidunt leo sed mi aliquet lacinia. Quisque egestas dictum nisi. Maecenas lobortis pellentesque feugiat. Sed ut accumsan felis. Ut eget diam at ante ultrices accumsan. Cras in odio lacinia,
    interdum sem vitae, efficitur ipsum. Nam porttitor at lacus tempor auctor. Aenean auctor, diam vulputate semper bibendum, felis nulla dapibus mi, sit amet fermentum erat massa sit amet sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    Maecenas at congue sem. Nullam gravida ultrices interdum. Aenean nulla enim, consectetur sit amet hendrerit a, varius non est. Maecenas commodo diam diam, vitae molestie lacus ullamcorper a. Vivamus dapibus mi vitae nisl feugiat, ac feugiat lectus
    faucibus. Praesent facilisis nisl sit amet viverra fringilla. Morbi posuere velit venenatis velit maximus, et laoreet ex varius. Curabitur ut quam non neque egestas molestie. Donec ut purus eget urna viverra ullamcorper id a justo. Nam porta euismod
    lectus, a aliquam turpis sollicitudin et. Morbi dignissim metus nec enim varius, quis ornare ex viverra. Phasellus imperdiet nisl non luctus malesuada. Nulla dapibus finibus faucibus. Donec mi massa, maximus a ante ut, tincidunt pharetra mi. Quisque
    ultrices sit amet velit eu convallis. Nunc porta tellus sed augue ornare, vel porttitor tortor semper. Morbi id malesuada nisi. Pellentesque euismod nisl vel orci ornare aliquam. Integer sit amet ex rutrum, bibendum eros nec, mollis libero. Aliquam
    eget ex a ligula sodales convallis ut non tellus. Nunc felis mi, tincidunt eu mattis eget, congue a lectus. Donec commodo turpis turpis, non tempus est eleifend vel. Fusce ut congue mauris. Etiam lacinia elit quam, in feugiat dolor porta vitae. Sed
    laoreet sed metus eget hendrerit. Phasellus pharetra magna ac molestie volutpat. Phasellus eget tincidunt velit. Suspendisse finibus, est volutpat convallis bibendum, mi erat ornare tellus, ac rhoncus ligula felis vel mi. Maecenas nec risus turpis.
    Pellentesque congue, orci ac commodo mattis, risus lectus ornare metus, vitae lobortis est orci id lorem. Nullam lobortis in justo eget commodo. Nunc non aliquam elit, ut euismod augue. Fusce faucibus felis at erat accumsan vestibulum. Aliquam ultricies
    elit nec nibh blandit, sed vehicula libero porttitor. Nulla volutpat varius mauris suscipit pellentesque. Sed arcu ipsum, consequat et eros vel, fermentum pharetra felis. Aliquam feugiat vehicula congue. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Cras sed iaculis nibh, nec auctor nibh. Vestibulum vitae auctor tortor, eu accumsan odio. Aliquam quis pellentesque.</p>
</div>
Cupro answered 5/7, 2016 at 20:38 Comment(1)
You can add Safari to the list as well, works nicelySchechinger
L
3

N.B. The solution detailed below works only on current versions of Firefox, Safari and Edge.

If you know the height of the image you can give the <div> a padding-top equal to (or slightly greater than) that height.

Then, you can give the very first paragraph in the <div> a negative margin-top, equal to the padding-top, you have just applied to the <div>.

This will mean the first column of text starts at the top of the <div> and the second column of text starts just beneath the absolutely positioned <img>.

Example:

div {
position:relative;
width:500px;
padding-top:360px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}

div img {
position: absolute;
top:0;
right:0;
}

div p:nth-of-type(1) {
margin-top:-360px;
}
<div>
<img src="http://tny.im/50D" alt="La Joconde">
<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p>
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p>
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p>
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p>
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p>

<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p>
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p>
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p>
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p>
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p>

<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p>
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p>
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p>
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p>
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p>

<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p>
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p>
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p>
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p>
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p>
</div>
Liquorish answered 5/7, 2016 at 20:36 Comment(7)
That doesn't seem to work. Did you actually try it? Because you can't select the child elements of a column-count element with pure css.Vacation
@lexith Works here. Have you actually tried it? Your comment doesn't even fit the solutionSchechinger
Doesn't work here (Chrome on OS X) - text in both columns is below the bottom of the imageAesthete
Ah. That's a shame. It works in Firefox 47, no problem.Liquorish
Nice try though :-)Aesthete
@lexith OK, that's weird. works for Safari and Firefox, I admit I forgot to check Chrome.Schechinger
yes well i'm sorry i should have tried firefox too probably. @Liquorish maybe you should edit your answer and mention that. Actually works in Edge too.Vacation

© 2022 - 2024 — McMap. All rights reserved.