Designing an adaptive div for textual content without relying on Bootstrap

I am working on creating a responsive div that includes an image, text, and spacing between the divs. Initially, I had divs with spacing and text but they did not resize properly when more text was added. I am aiming to achieve a layout similar to this: https://i.sstatic.net/JsRg9.png

One example I found has more text in some of the divs while every other div also resizes accordingly: https://i.sstatic.net/dhw3U.png

This is what my current setup looks like:

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      <h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>
</div>

The goal is for the div to resize based on the amount of text and cover the bottom part. Currently, I am using "< br >" tags to break the text, which is not the ideal solution I am aiming for.

css

Answer №1

To make sure the text in your h3 tag wraps correctly, try using the CSS property word-wrap: break-word;


h3{
    word-wrap: break-word;
}

I hope this solution works for you!

Answer №2

If you desire hyphenation, consider utilizing the css property "hyphens," allowing the browser to determine where to break text. Check out this example (with a fallback option due to limited browser support in certain languages)

h3 {
     word-break: break-word; /* not standard for webkit */ 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}


.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 100px; 
   color:white;
}
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">A Movie in the Park: Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3 lang="en">Incomprehensibilities </h2>

</div>

Answer №3

sadasdsadsadsadsadsadasdasdsadsadsadsadas
this is nonsensical text, it cannot be used in this context

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);

   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsa dsadsadsadsa dasdasdsads adsadsadas</h2>

</div>

Answer №4

Utilize the CSS property word-break: break-all; for the h3 element.

.img{
 width:300px;
 height:100%;
}
.image { 

   position: relative; 
   width: 100%; /* for IE 6 */
}

h3{
   background-color: rgba(0, 0, 0, 0.5);
   word-break: break-all;
   position: absolute; 
   top: 105px;
   left: 0; 
   width: 300px; 
   color:white;
}
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>
<div class="image">

      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />
      
      <h3>sadasdsadsadsadsadsadasdasdsadsadsadsadas</h2>

</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

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

Currently, I am developing an Angular table with the cdk Virtual Scroll feature. Is there a method to adjust the scroll viewport's height dynamically? While the standard style property works, I am encountering difficulties setting the value using ngSt ...

cssangularvirtualscrollangular-cdk-virtual-scroll

Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom ...

htmlcssangularsass

What is the process for disabling the CSS module feature in Next.js?

In Next.js, Global CSS can only be imported in _App.js. However, importing global CSS in every component is not allowed, so we have to use CSS modules to comply with this restriction imposed by Next.js. Currently, I am in the process of migrating a large ...

javascriptcssreactjsnext.jsserver-side-rendering

Is it possible to display a subtle grey suggestion within an HTML input field using only CSS?

Have you ever noticed those text input boxes on websites where a grey label is displayed inside the box, but disappears once you start typing? This page has one too: the "Title" field works the same way. Now, let's address some questions: Is ther ...

javascripthtmlcsstextboxlabel

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

javascripthtmlcsscustom-data-attribute

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

javascripthtmlcssscroll

Label for the checkbox is covering other content on the screen in 1024 x 768

Here is the JSP code snippet: <h:field path="configuredChannels" required="true" code="admin.menu.channels"> <div class="row-fluid" data-channel-checkboxes="#"> <form:checkboxes element="div class=&apos ...

htmlcss

Resizing nested elements while maintaining consistent padding dimensions

If you're looking to create a sleek foundation for a 200px wide, 30px high editable combobox that can be easily used with angular binding or other JavaScript data-binding solutions, consider the following HTML code. However, there's a desire to m ...

javascripthtmlcsslayoutcombobox

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

androidjquerycsscordova

The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creatin ...

csstwitter-bootstrapresponsive-designbootstrap-4

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

I'm facing a challenge in creating a row of 4 images that are responsive and uniform in size, despite being different dimensions (640x799, 640x479, ...). I've attempted to use columns and img-fluid to achieve this, but the shorter images do not f ...

htmlcssbootstrap-4

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

Reduce the height of the tabs bar in the Gnome terminal

After recently installing Lubuntu 16.04 with gnome-terminal, I noticed that the terminal takes up more space on my monitor due to two unnecessary buttons in the top right corner. For avid terminal users like myself, these buttons only add bulk to the tabs ...

cssubuntutabsgtk3gnome-terminal

Troubleshooting: Dealing with overflow problem in a span element containing an image tag

One issue I encountered involves overflow. A div is set to overflow: hidden, with all elements inside positioned absolutely. These elements consist of a span tag containing text and an image tag. An arrow allows control of the span tag moving forwards or b ...

cssoverflowhtml

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

I've been tackling the challenge of creating an accordion and I'm almost there. However, I'm facing an issue where the arrow doesn't return to its original position after clicking the close "x" icon. The toggle works fine but the arrow ...

javascriptjqueryhtmlcss

The ul element does not encompass all child elements in terms of size

I have been working on creating a tabbed navigation component using HTML, and my code looks like this: <ul class="nav"> <li class="selected">Selected Tab</li> <li><a href="#">Not-selected Tab</a></li> ...

htmlcss

Tips for shrinking a sticky header when scrolling using Angular and JavaScript

Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality. How can I adjust the display of the lower half of the header to show no text when the user s ...

javascripthtmlcssangularsticky-footer

What is the best way to vertically center the `tab-content` without relying on the tablist for

After examining the form below, my goal is to center only the fields while keeping the navigation buttons in their original position. Specifically, I want only the tab-content to be centered, excluding the tablists. <link rel="stylesheet" href="https ...

htmlcssbootstrap-5

What is the method for locating line spacing within HTML code?

After posting a previous question, I am still on the quest to determine the exact position of each line of text within an element. While I was successful in identifying the css lineHeight attribute (as mentioned in the previous response), I encountered an ...

javascripthtmlcssandroid-webview