firpo firpo - 3 months ago 20
CSS Question

How to put a responsive text div next to another responsive div

I have a div with an image in it and a text div next to the image. On a wide screen, both appear fine however when I start to reduce the screen, the text div goes below the image div and leaves a lot of room available. Browser seems to want to keep text div at 100% and move it as a block. I need to allow IE8+ to use it so cannot use flex properties. Is there a way to continuously shrink the text div responsively until it reaches a minimum size, then let it drop underneath so we don't have such a wide area of open space?

<div class="page-text" style="display: block;">
<div style="display: float: left; margin-right: 25px; vertical-align: middle;">
<img src="./images/mover.jpg" style="width: 100%; min-width: 250px">
</div>
<div class=box style="float: right; vertical-align: middle;">
<p align="center" style="font-size: 15pt; font-weight: 500;">Our Mission</p>
<ol>
<li style="font-size: 13pt;">To take away the burden of the downsizing process so you can focus on what matters, and<p>
<li style="font-size: 13pt;">To maximize the equity in your home and contents back to you or your estate.
</ol>
</div>
</div>

Answer

HTML

I removed the inline styles and added class names:

<div class="page-text">
  <div class="page-text-image">
    <img src=" http://placehold.it/1200x650">
  </div>
  <div class="page-text-message">
    <p>Our Mission</p>
    <ol>
      <li>To take away the burden of the downsizing process so you can focus on what matters, and
      <li>To maximize the equity in your home and contents back to you or your estate.
    </ol>
  </div>
</div>

CSS

Here's the basic approach: Start with the small screens first, and then add a media query for larger screens (you can change that width to your specs). Float the image div left and float the message div right, set each container to 50% width.

/* mobile first */
.page-text-image img {width:100%;display:block;}

/* for large screens and up */
@media only screen and (min-width: 64.063em) {
.page-text-image {width:50%; float:left;}
.page-text-message {width:50%; float:right;}
}

IE SUPPORT

Since IE8 doesn't support media queries, those users will see the mobile version unless we add a backup plan. We have a couple options:

  1. use IE conditional comments to provide an external stylesheet for IE only (preferred)
  2. use CSS hacks in the existing stylesheet to provide support for IE

These styles specific to IE would basically be the same styles inside the media query above. Let me know if you need further instructions.