How to make columns - html

Question

My goal is to have the two Pictures side by side with its text beneath it, as described here.
The HTML cannot be changed.
I tried a bunch of things, like margin, display and float, nothing has yet done the trick.
What I have so far :
/*stildeklarationer för rubriker */
body {
margin-bottom: 496px !important;
}
h1 {
font-size: 30px;
letter-spacing: 4px;
color: blue;
font-family: helvetica;
font-weight: normal;
margin: auto;
border: 2px;
text-align: center;
border-style: solid;
border-color: #000000
}
h2 {
font-size: 20px;
letter-spacing: 4px;
color: #000000;
font-family: helvetica;
font-weight: normal;
}
/*stildeklarationer för bilder */
img {
float: left;
max-width: 260px;
max-height: 480px;
position: relative;
}
/*stildeklarationer för all text */
p {
width: 50%;
font-family: Verdana;
color: #CCC;
font-size: 13px;
line-height: 20px;
text-align: justify;
background-color: white;
color: black;
border-style: solid;
border-color: #000000
}
article section footer {
float: left;
clear: both;
font-family: Verdana;
color: #CCC;
font-size: 10px;
line-height: 16px;
text-align: justify;
}
footer {
clear: both;
overflow: auto;
font-family: Verdana;
color: #CCC;
font-size: 12px;
line-height: 16px;
text-align: center;
}
#wrapper {
width: 900px;
margin: 0 auto;
/*centrerar*/
position: relative;
}
<div id="wrapper">
<header>
<h1>Smakprov ur studieguiden för webbutveckling 2</h1>
</header>
<article>
<section>
<header>
<h2>Om CSS</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/W6GqEQ" alt="css3">
<p>Vad CSS kan användas till har vi lärt oss i föregående kurs men vi kommer arbeta vidare med stilmallar i denna studieguide eftersom det är ett sätt att styra utseendet på hemsidan som ska användas. Inga hemsidor görs idag utan att använda just stilmallar
och allt eftersom nya versioner av CSS släpps så förbättras möjligheterna och utbudet av funktioner som erbjuds.</p>
<p>Den senaste versionen av CSS är då CSS3 och för att vi fullt ut ska kunna utnyttja denna version ska vi alltså använda HTML5. Glöm dock inte att webbdesign utvecklas hela tiden och det som är sanning idag behöver inte vara sanning imorgon</p>
<p class="linktext">Här är ett youtube-klipp om CSS</p>
<footer>Skrivet av Oscar Antbring den 12 juni 2013</footer>
</section>
<section>
<header>
<h2>Om märkspråk</h2>
</header>
<img src="./Modul 2 - uppgift 2_files/U7tltv" alt="html5">
<p>Märkspråk – eller markup language – är ett sätt att med hjälp av olika textkoder ge direktiv till ett program (i vårt fall då en webbläsare) hur ett dokument ska presenteras och vilka funktioner som ska finnas. Som vi kommer ihåg från första kursen
så finns flera olika sådana textkoder att använda – eller taggar som vi ofta kallar dem för. Det kan vara en tagg för att berätta för webbläsaren att vi vill presentera en hyperlänk, eller att vi ska presentera en bild exempelvis. Naturligtvis
måste webbläsaren veta vad de olika koderna – eller taggarna – betyder. Det är därför som olika märkspråk (och versioner) finns och från föregående kurs kommer vi ihåg HTML 4.01 samt XHTML. Vilket märkspråk som används ska vi specificera i dokumentet
så att webbläsaren vet vilka taggar som kan användas och vad de betyder</p>
<p>När vi skapar en hemsida så specificerar vi en så kallad DOCTYPE som beskriver vilket typ av dokument som webbläsaren kan förvänta sig. Vi säger helt enkelt till webbläsaren – ”detta dokument är av typen HTML5, och då kan du förvänta dig dessa taggar
och struktur”. Naturligtvis måste webbläsaren ha stöd för HTML5 så att programmet vet vad som ska göras med taggarna och deras egenskaper.Det är därför det är så viktigt att vi validerar koden så att vår kod stämmer överens med vad webbläsaren
förväntar sig utifrån typen av dokument. Vi kommer återkomma till just validering av koden i sista modulen även om det redan tagits upp i första kursen – validera gärna kontinuerligt koden genom hela utvecklingsarbetet.</p>
<p class="linktext">Här är en svensk artikel som beskriver HTML5</p>
<footer>Skrivet av Oscar Antbring den 11 juni 2013</footer>
</section>
</article>
<footer>©Hermods</footer>
</div>

Answer 1

If you want the blocks to be side-by-side you could try the following:
section {
float: left;
width: 50%;
}