Responsive Web Design Techniques – Preventing Text from Wrapping Below an Image

The fundamental principle behind responsive web design is that the layout of the web page will dynamically adapt to the width of the client’s browser.  As the size of the browser decreases, certain buttons may disappear, navigation elements will change, and the layout will wrap differently to accommodate the browser.  Although many mobile phones can still display a website properly at full width through their high-resolution display and zoom, websites with a significant mobile visitor base will benefit from the increased usability of a responsive design.

One of the challenges in coding the responsive layouts is that elements of one type will need to convert to a different type as the page gets smaller.  For example, the following format might work well while the site is large, but will not scale well as the size decreases:

The code-behind for this scenario could look like this:

<table class="cardinal"><tr>
  <td><img /></td>
  <td><h2 /><p /></td>
</tr></table>

As the page scales with the browser, the text becomes gradually narrower, and we will eventually reach the point where the wrapping is too narrow.  At this point, it would be beneficial to either wrap the text around the image, or simply move the text below the image:

Either way, a table-based layout makes this impossible.  It would instead turn out like this:

While the natural inclination may be to use DIVs with floats in this situation, there are often problems with DIV elements wrapping too early, especially with dynamic content.  Luckily, there is a little-known trick in CSS which will enable us to use paragraphs to achieve the effect:

.cardinal p { overflow:hidden; }

The HTML would also need to be rewritten in the following simpler syntax:

<div class="cardinal">
  <img float="left" />
  <h2 />
  <p />
</div>

On the paragraph tag, the only function of the overflow tag is to prevent text wrapping underneath an image.  By combining this with media queries, the page can dynamically change wrapping as the browser window is scaled:

@media screen and (max-width: 470px) { overflow:visible; }

This unique effect of the paragraph overflow style can be a useful aid in the design of many responsive web layouts.

Written by Andrew Palczewski

About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+