0

I am doing some web development and came across an aesthetic issue. For testing, I shrink the window and see how the CSS responds. As I do this, a text area reduces in width until 0. At low width most of the text renders lower, but the paragraph's leading word, "also", remains alone much higher for a good range of window sizes. (estimate 330-350px)

The problem can be seen here (link removed) when you reduce the width of the window until the side edge is close to the pictures of the goats.

JavaScript solutions are appreciated but not preferred.

I tried putting the text in a span and giving it a min-width attribute, but it doesn't work, even with display : block; as suggested here.

Testing in Firefox.

Community
  • 1
  • 1
Elliot MacNeille
  • 91
  • 1
  • 7

1 Answers1

1

If your text is static, you can use   

<div>
Also&nbsp;chickens, turkeys, pigs, a fig, an apple, and a couple of citrus trees on our farm.<br>
<br>
</div>

OR

This is happening as there is a float: left style on the <div> which contains your <img> tag

<div style="float:left; padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>

It works fine if you remove this style, i.e.:

<div style="padding-right:10px; max-width:575px; width:60%; min-width:320px; padding-bottom:20px;">
<img ...
...
</div>
sharayu
  • 26
  • 4
  • This causes the text to render below the picture at large window widths, which is not the desired layout. I like the layout as it is, except for the awkward separation between the leading word and the rest of the paragraph for certain window widths. – Elliot MacNeille Oct 07 '15 at 23:13
  • Then, if your text is static you can use   instead of space between the first 2 words. That will not break the words on 2 lines. Edited in the answer above. – sharayu Oct 08 '15 at 03:07
  • Thank you. I feel like a rookie for not know this, but this was hard to look up because I wasn't sure what form the solution would be realized in. – Elliot MacNeille Oct 08 '15 at 05:50
  • Glad that it helped :) Thanks! – sharayu Oct 08 '15 at 06:48