Bild nicht neben Text sondern darunter

html.de-Forum HTML, XHTML & CSS
1

HTML:

Herzlich Willkommen

text text text text text

Logo

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

2

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)