0

on the picture u can see my problem of the text overlapping my image when the screen is less then 1400 pixels wide or so.

This is my HTML of it.

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

This is the 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

StijnT
  • 3
  • 2

1 Answers1

1

You're floating the two elements next to each other so that they will never overlap, but the problem is that you have no code controlling how the image itself behaves. What you need to do is ensure that the image never escapes the bounds of its parent:

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

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • maybe know a way to make the bottom images have little spacing between them? – StijnT Feb 06 '17 at 23:25
  • Glad to hear that my solution worked for you :) Please don't forget to mark the solution as correct by clicking on the grey check below the vote buttons -- this removes it from the 'Unanswered Questions' queue, and awards reputation to both the question asker and question answerer. Of course, in saying that, you are under no obligation to mark my answer (or any other answer) as correct. As for your second point, you would need to provide a lot more code in order to be able to answer that, and that should really be an independent question. – Obsidian Age Feb 06 '17 at 23:28