Text alongside an image within a dynamic div that adjusts its height according to the image size

Hopefully the title was clear enough. I'm attempting to align an image and text next to each other within a div while adjusting the height of the container based on the image's height. I've experimented with various approaches, but haven't achieved the desired outcome. Sometimes the image spills outside the boundaries of the div, sometimes there is a large gap between the image and text, and sometimes the text appears below the image as shown in the JSFiddle example at the end. Perhaps the solution is simpler than I realize. Here's the code after several revisions:

HTML

<div class="info">
  <h2>Example</h2>
  <div class="photo">
    <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
  </div>
  <div class="desc">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
  </div>
</div>

CSS

.info {
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 2% 4%;
  box-shadow: 0 3px 5px #808080;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.info .photo {
  overflow: auto;
}

.info img {
  width: 30%;
}

.info .desc {
  width: 70%;
  float: left;
}

JSFiddle Demo

https://jsfiddle.net/dw812685/1/

Thank you!

Answer №1

When implementing a float layout, here is how I would structure it:

Float the containers for the left and right sides, and ensure the image has a max-width: 100%. It's also important to use a clearfix on the parent element of the floated items.

.info {
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 2% 4%;
  box-shadow: 0 3px 5px #808080;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: auto;
}

.info .photo {
  float: left;
  width: 30%;
  margin: 0 1% 0 0;
}

.info img {
  max-width: 100%;
}

.info .desc {
  width: 69%;
  float: left;
}
<div class="info">
  <h2>Example</h2>
  <div class="photo">
    <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
  </div>
  <div class="desc">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
  </div>
</div>

An alternative approach would be to utilize flexbox, where you can set the flex-basis of .photo and specify the text area to flex-grow (or simply flex: 1 0 0)

.info {
  display: flex;
  flex-wrap: wrap;
  background-color: #FFFFFF;
  margin-top: 2%;
  padding: 2% 4%;
  box-shadow: 0 3px 5px #808080;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

h2 {
  flex: 0 0 100%;
}

.info .photo {
  flex: 0 0 30%;
  margin-right: 1em;
}

.info img {
  max-width: 100%;
}

.info .desc {
  flex: 1 0 0;
}
<div class="info">
  <h2>Example</h2>
  <div class="photo">
    <img src="https://placeholdit.imgix.net/~text?&w=500&h=700">
  </div>
  <div class="desc">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "</p>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for a div nested within another div to still occupy space on the page despite being set

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $("select#choosebook").change(function(){ $(".title").slideDown(" ...

What is the best way to incorporate a third-party element into Vue using a script tag?

I am in the process of developing a website and I would like to include a widget that links to a podcast on BuzzSprout. Initially, I created the site using HTML to test out different designs, but now I am looking to transition it to VueJS. In my HTML vers ...

Is there a way I can utilize canvas to overlay one image onto another?

Is there a way to merge one image into another by using a transparent box? It's not just about copying and pasting an image into another. I also want to know how to transform the image to fit perfectly within the other image. For example, similar to ...

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

What steps can be taken to convert this function into a more concise, dry function?

I'm attempting to customize a typewriter effect on my webpage, and while it successfully displays predefined data, I am struggling with converting it into a function that can receive values and then display those values. I have made attempts to modif ...

Achieving a scrolling body with a fixed header in a Vue b-table

Currently, I have implemented a b-table element on a webpage to display data from a database. The table is paginated, but feedback suggests that users prefer all information displayed in a single scrolling view. However, the issue arises when I attempt to ...

Import files from local directory to iframe in Electron application

I am currently working on an application using Electron that allows users to preview HTML5 banner ads stored locally on their computer. At this point, I have enabled the ability to choose a folder containing all the necessary files. Once a directory is s ...

What is preventing the function from successfully compiling text from various files that are uploaded using the HTML5 file reader into an array?

My current challenge involves attempting to upload two text files using the HTML 5 file reader. While I can successfully get the files into an array, encountering difficulty arises when trying to return that array from the function. One solution could be ...

Unable to display image on HTML page transmitted via socket in Java

After successfully loading my simple HTML in Chrome and seeing it display correctly, I encountered a troubling issue when trying to pass it through a Java socket. Despite only passing bytes through the socket, the image always appears broken. The perplexin ...

Conceal a single column on mobile devices using Bootstrap 4

Take a look at this code snippet: <div class="row"> <div class="col-lg-3"> <div class="ava-block"> </div> </div> <div class="col-lg-6 ...

Tips for creating a button that maintains consistency across different screen sizes

One of the images linked below shows a button displayed on two different sized screens, one 24 inches and the other 13 inches. The button on the 24-inch display appears normal, while the "Add to Cart" button on the 13-inch display is broken. Check out th ...

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

Guide on sending a JavaScript variable as a URL parameter in Django

I need to pass a radio ID to my view, but I'm struggling with how to do it using the GET method in the URL: html: <a href="{% url 'maintenance_issue_fix' %}?radio_id=checked"> <img src="{% static 'images/ma ...

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

JavaScript and HTML code for clipboard functionality without the need for Flash

My challenge lies in creating a grid with numerous columns and data. The user has expressed the desire for a copy to clipboard button that will allow them to easily copy the data. Can anyone suggest ways to implement Copy to Clipboard functionality withou ...

Exploring the combination of PHP and HTML through conceptual sessions

I am a beginner in the world of PHP, HTML, and website development, and I am currently trying to grasp the concept of Sessions. My goal is to implement a login/logout feature on a website using sessions, MySQL, and Slim framework. I am struggling with und ...

Struggles with organizing tables in asp.net

My apologies for my lack of knowledge in this area, but I am struggling to make my table look correct on my webform. I begin by creating a table: <table> </table> And I want to add a border. The traditional way is to use the 'border&apo ...

Unlocking the Secrets: Adding Multiple Contents to Your Master Page in ASP

I need some clarification on a dilemma I'm facing. My master page has a content placeholder that is used by all subpages: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html> ...

The parent container fails to adjust its size to fit the child div

While browsing through various questions, I noticed that none of them mentioned the position:absolute property (which may be the missing piece). I have always been comfortable working with tables, but in my first attempt with divs, I encountered an issue. ...