Bild nicht neben Text sondern darunter

[Mineralwasser]

HTML:

<div class= "links">
<h1>Herzlich Willkommen</h1>
<p>
text text text text text
</p>
</div>
<div class= "rechts">
<img src="bilder/bild2.jpg" alt="Logo" height="150px" width="150px"/></a>
</div>


CSS:

.links { text-align:left;
margin-left:2em;
width: 60%;
}
.rechts{
float: right;
width: 40%;
}


Der Text soll links stehen und das bild soll rechts daneben sein. Es funktioniert soweit dass der Text links steht und das bild rechts. Das bild ist aber nicht neben dem Text sondern darunter. was mache ich falsch? Ich möchte es mit zwei div-boxen machen und nicht mit tabellen

 

[Tronjer]

60% + 40% = 100%

Durch das margin-left hat der zweite Container keinen Platz mehr neben dem ersten.

Lösungsnsätze:
- calc()
- Flexbox statt float
- Wenn float, dann beide Container mit float:left, oder der erste mit float:left und der zweite mit float:right
- Framework mit Grid Layout (Bootstrap)