CSS Text Wrapping Under Image

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.

Your problem is that the widths, margins and padding of the text and image add to more than the whole width available, and thus the text block is moved to the 'next line.' — frozenkoi, Nov 01 '13 at 01:19

score 2 · Accepted Answer · answered Nov 01 '13 at 01:34

2

Use no-wrap:

.article p
{
    white-space:nowrap;
}

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

answered Nov 01 '13 at 01:34

colbyJax

1,033
1
9
9

CSS Text Wrapping Under Image

1 Answers1