图片下方的CSS文字包装

Question

I need some help stopping my text from wrapping under my image when the browser window gets smaller.

HTML:

<div class='article'>
  <img src='images/fakeSlider.png' />
  <h2>Example</h2>
  <p>This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.</p>
</div>

CSS:

.article {
  min-width: 70%;
  max-width: 100%;
}

.article h2 {
  float: left;
  font-family: Cabin Bold;
  font-size: 22px;
  padding: 5px;
  margin: 5px 10px auto;
}

.article p {
  float: left;
  font-family: Cabin;
  font-size: 18px;
  padding: 5px;
  margin: 5px 10px auto;
  min-width: 50%;
  max-width: 70%;
  display: block;
}

.article img {
  min-width: 20%;
  max-width: 40%;
  float: left;
  height: 120px;
  padding: 5px;
  margin: 5px 10px auto;
}

So; to be clear... I am wanting it so the image is on the left hand side while the title is to the top right of the image and the text is under the header. It looks ok until the browser window gets smaller and the text goes under the image. I'm not sure if I'm being stupid and just can't see what's wrong but I've tried some things and still can't get it to work.

Any help is appreciated. Thanks.

Answer 1

Use no-wrap:

.article p
{
    white-space:nowrap;
}

I tested with your code listed above, works perfect. Please mark as answer if this helped.