Поплавки перекрывающиеся наложения текста image

Question

на картинке u может видеть мою проблему с текстом, перекрывающим мое изображение, когда экран меньше 1400 пикселей в ширину или около того.

Это мой HTML-код.

<article> 
<img src="images/welkomartikel2.jpg" /> 
</article> 
<aside> 
<h2>Welkom</h2> 
<p>The Text that overlaps</p> 
</aside> 

Это CSS:

article { 
    float: left; 
    width: 50%; 
    margin: 0 auto; 
    height: auto; 
    padding: 4%;} 

aside { 
    float: right; 
    margin: 0 auto; 
    width: 35%; 
    height: auto; 
    padding: 3%;} 

Overlaping text on my picture

Answer 1

Вы плавающая два элемента рядом друг с другом так, что они никогда не будут пересекаться, но проблема в том, что у вас есть нет код, управляющий как изображение себя ведет себя. Что вам нужно сделать, это убедиться, что изображение никогда не убегает за пределами своего родителя:

article img { 
    max-width: 100%; 
    max-height: 100%; 
} 

Надеется, что это помогает! :)