Search code examples
htmlimagealignment

HTML Trouble Floating Two Images Side-By-Side

Having trouble trying to make two images show side by side, they are not aligned perfectly and I do not know how to fix it,

    <article style="width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:left">
</article>

<article style=";width:100%;">
<h1> Repair Services </h1>
<p> We repair computers </p>
<img src="http://lorempixel.com/400/200/" style="float:right">
</article>

here is the fiddle https://jsfiddle.net/Syystole/vfkg8018/11/

Solution

  • use flex layouting

    i updated your jsfiddle: https://jsfiddle.net/vfkg8018/13/

    wrap all into div and set class .side-by-side on wrapping div

    .side-by-side{
display: flex;
flex-direction: row;
}