The image division will contain a variable-sized image, and it should be aligned both vertically and horizontally. The text division will include a substantial amount of text.
Although using a table could achieve this layout easily, I aim to make it responsive so that when the site's width becomes too narrow, the text division will no longer float next to the image division but instead fall underneath it.
If using a table layout works best for you, then utilize it. To make it responsive, incorporate an appropriate media query and adjust the layout accordingly. By table layout, I mean utilizing `display: table` (not the `table` element).
Here is a simple way to accomplish this:
#parent { display: table; }
#parent > div { display: table-cell; width: 50%; vertical-align: middle; }
Ensure to set a `max-width` on the image to keep it within boundaries:
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
The `vertical-align` and `text-align` properties will help manage the alignment of the image.
A challenge I encounter is that the divisions only occupy the necessary space based on their content. How can I ensure that they both maintain the same size when floated alongside each other?
By fixing the width using `display: table-cell`, this issue will be resolved.
Once the divisions no longer float adjacent to each other, maintaining them as the same size would no longer serve any purpose.
To address this scenario, simply add a media query for the required breakpoint and reset the `display` value back to `block`:
@media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#parent { border: 1px solid #00f; width: 75%; margin: 0 auto; display: table; }
#parent > div {
border: 1px solid #f00;
display: table-cell; width: 50%;
vertical-align: middle;
}
#imgWrap { text-align: center; }
#imgWrap > img { max-width: 100%; }
@media screen and (max-width:480px) {
#parent { display: block; }
#parent > div { display: block; width: auto; }
}
<div id="parent">
<div id="imgWrap">
<img src="//lorempixel.com/240/120" />
</div>
<div id="contentWrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat. In sit amet condimentum nulla, in elementum lorem. Duis iaculis, nibh nec iaculis semper, nisi neque fringilla metus, in faucibus urna urna non libero. Nullam aliquet ligula lorem, imperdiet lobortis ex malesuada ac. In sollicitudin eros eu dui iaculis, ac rutrum metus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis cursus erat.
</p>
</div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/29vLq11o/3/