Reputation: 1

Image on Right, text on left

I'm pretty new to website development and currently still running a course.. We have this assignment and there is just one thing where I can't wrap my mind around (pun intended).

In the "problem" image, the image is in a correct position, but the text alignment is off.. The text should be as shown in the "solution" image

#article {
    width: 650px;
    min-height: 280px;
    margin: 20px;
}

#article p {
    font-size: .8em;
    line-height: 1.6em;
}
        
#win {
    position: relative;
    left: 160px;
    top: 40px;
    float: right;
}

<body>
    <div id="article">
        <a href="mailto:[email protected]?subject=GRATIS HUISKAMER CONCERT&body=Ik wil graag kans maken op het winnen van het GRATIS huiskamerconcert.">
            <img id="win" src="img/gratis.png" alt="test"/>
        </a>

        <h1>de spikes & de spikids</h1>

        <p>
            Dit is de officiële Spikes-site (dus: de enige echte)! Hier vindt u alle
            informatie en nog véél méér onzin over de knotsgekke bands de Spikes en de
            Spikids. Volg ons op
            <a href="https://www.facebook.com/despikes" target="_blank">Facebook.</a> De
            foto's die wij van jou schieten op onze optredens – vind je voortaan op
            facebook. Op onze eigenste
            <a
            href="https://www.youtube.com/channel/UCTUYz6ynn0M-vHxUXJM15NA"
            target="_blank"
            >YouTube</a
            >
            SPIKES TV kom je alvast in de stemming. Véél kijkplezier!
        </p>

        <h1>De Spikes anno 2015</h1>

        <p>
            De Spikes hebben zichzelf microscopisch onder de loep genomen. Er is gewikt,
            gewogen en het orakel heeft beslist! Het jarenlange succesvolle
            Spikes-concept heeft z’n houdbaarheidsdatum bereikt. Het tijdperk van de
            “spottende parodieën en persiflages” is voorgoed voorbij. Het muzikaal
            voornemen is om “het muzikaal OORgasme” tot méérvoudige hoogtes te brengen
            in 2015 – en tegelijkertijd toch “dé allerleukste coverband uit België” te
            blijven.
        </p>
    </div>

I've been struggling with this for a while now, a solution would help me out a LOT! :)

Thanks in advance for everyone who answers this!

PROBLEM_IMAGE

SOLUTION_IMAGE

Upvotes: 0

Answers (3)

StackSlave

Reputation: 10627

Add a couple of <div>s into your <article>, then use display:flex;:

*{
  box-sizing:border-box;
}
article{
  display:flex;
}

<article id='article'>
  <div>
    <h1>de spikes & de spikids</h1>
    <p>
      Dit is de officiële Spikes-site (dus: de enige echte)!
      Hier vindt u alle informatie en nog véél méér onzin
      over de knotsgekke bands de Spikes en de Spikids.
      Volg ons op
      <a href='https://www.facebook.com/despikes' target='_blank'>Facebook.</a>
      De foto's die wij van jou schieten op onze optredens
      – vind je voortaan op facebook. Op onze eigenste
      <a href='https://www.youtube.com/channel/UCTUYz6ynn0M-vHxUXJM15NA' target='_blank'>YouTube</a>
      SPIKES TV kom je alvast in de stemming. Véél
      kijkplezier!
    </p>
    <h1>De Spikes anno 2015</h1>
    <p>
      De Spikes hebben zichzelf microscopisch onder de loep
      genomen. Er is gewikt, gewogen en het orakel heeft
      beslist! Het jarenlange succesvolle Spikes-concept
      heeft z’n houdbaarheidsdatum bereikt. Het tijdperk
      van de “spottende parodieën en persiflages” is
      voorgoed voorbij. Het muzikaal voornemen is om “het
      muzikaal OORgasme” tot méérvoudige hoogtes te brengen
      in 2015 – en tegelijkertijd toch “dé allerleukste
      coverband uit België” te blijven.
    </p>
  </div>
  <div>
    <a href='mailto:[email protected]?subject=GRATIS HUISKAMER CONCERT&body=Ik wil graag kans maken op het winnen van het GRATIS huiskamerconcert.'><img id='win' src='img/gratis.png' alt='test' /></a>
  </div>
</article>

Note that your image was a relative path so you just see the alt, which is test in this case.

Upvotes: 1