Using CSS to ensure that a div element gets the remaining width within its parent container

Question

Using CSS to ensure that a div element gets the remaining width within its parent container

Looking to create a responsive design similar to the one in this https://i.sstatic.net/8NvkQ.png Where the image maintains its width on smaller screens, while allowing the text to fill up the remaining space and reach 100% of the parent container.

I've attempted the following code but it's not producing the desired outcome.

<div class="comment">
   <div class="image"><img>Image here</img></div>
   <div class="text">Contents</div>
</div>

.comment {
   width: 100%;
}
.image {
   width: 50px;
   float: left;
}
.text {
   float: left;
}

While I'm open to using jQuery for a solution, my preference is for a CSS-only approach. Any assistance would be greatly appreciated! :)

html css responsive-design position width

Answer 1

Answer №1

Replace float with overflow: hidden like so:

.text {
  overflow: hidden;
}

.comment {
  width: 100%;
}
.image {
  margin-right: 15px;
  width: 50px;
  float: left;
}
.text {
  overflow: hidden;
}

<div class="comment">
   <div class="image"><img src="" alt="Image here"></div>
   <div class="text">Contents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes here</div>
</div>

Answer 2

Replace float with overflow: hidden like so:

.text {
  overflow: hidden;
}

.comment {
  width: 100%;
}
.image {
  margin-right: 15px;
  width: 50px;
  float: left;
}
.text {
  overflow: hidden;
}

<div class="comment">
   <div class="image"><img src="" alt="Image here"></div>
   <div class="text">Contents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes hereContents goes here</div>
</div>

Using CSS to ensure that a div element gets the remaining width within its parent container

Answer №1

Similar questions

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Does 1 CSS point amount to the same as 75% of a CSS Pixel?

Tips for implementing the .nex() property from jQuery in CSS styling

What is the best way to align an HTML block (<ul>) immediately below an <input> using jQuery?

Create two grid components for Material-UI and use Flexbox to ensure that both items have equal height

krajee implement image insertion with screen capture

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

Hovering over text can change the width of the background color

Is there a way to prevent the Title and Button from shifting upward when hovering over the button?

Is it possible to utilize a tracking pixel (invisible GIF) as a background image within a stylesheet?

Showing content in a single line causes it to drop down to the next

Is the column-fill property malfunctioning in Chrome?

The back button on the page does not reset the CSS styling

Is there a way to ensure that my if statement functions properly within this script?

Having odd PHP problems again, where my code seems to be completely ineffective. It's really bizarre

Numerous asynchronous AJAX requests accompanied by various loading indicators

Show the elements of an array within a div when a button is clicked, utilizing pure vanilla JavaScript

ways to run php script based on screen resolution or size

After the JavaScript calculation is completed, the following display may show a value of NaN

Achieving the perfect button using a combination of material-ui and styled-components