Conceal overflow without the need to clear floated elements

Currently, I have an interesting design challenge. The image is floated to the left of a banner area that needs to be shorter than the image height in order to accommodate growing text without clipping the image.

My first attempt was to use overflow: hidden on the .banner class, but instead of clipping, it cleared the image altogether.

I am aware of why this happened, but I'm struggling to find a solution that achieves the desired effect. Please see the ideal outcome below:

I've experimented with placing the image within a div and applying overflow: hidden to that element, but unfortunately, it didn't produce the desired result.

Perhaps the answer is obvious, right in front of me, but I just can't seem to see it.

To help visualize the issue, I have shared my code on a JSFiddle, complete with a smaller image for better clarity in the result window.

Thank you for any assistance in advance.

htmlcssoverflow

Answer №1

I have made some adjustments to your JSFiddle for better viewing of the results. By using the CSS property position: absolute;, I was able to remove the image from the Textflow. This ensures that the image does not get cut off if the text container is not high enough to display it completely.

Answer №2

If you're aware of the image width, you can achieve it using this method: http://codepen.io/pageaffairs/pen/EcJAK

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.banner {
    margin-top: 35px;
    background: #f00;
    overflow: hidden;
    position: relative;
}

.banner img {
    position: absolute; top: 0; left: 0;
}

.caption {
    margin-left: 230px;
    padding: 20px;
    font-size: 14px;
}

</style>
</head>
<body>

<div class="banner">
    <div class="image">
        <img src="http://placehold.it/220x300" alt="" />
    </div>
    <div class="caption">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
    </div>
</div>

</body>
</html>

Answer №3

There are two different approaches you could take:

1 . Implement the float property on the image's DIV instead of directly on the image itself, and then set a minimum height for the DIV.

Example:

    .image{ float:left; height:1px; }

View JSfiddle example here: http://jsfiddle.net/z3zfx7uv/

2 . Eliminate the image and its containing DIV entirely, opting to use background-image instead with appropriate padding-left.

Example:

    .banner {
        margin-top: 35px;
        background: #f00 url(http://placehold.it/220x300) top left no-repeat;
        overflow: hidden;
        padding-left:220px;
    }

View JSfiddle example here: http://jsfiddle.net/b6zzbowh/

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

What is the best way to locate the final text node within the <p> element?

Looking at the code below, my goal is to identify and retrieve the text node that serves as the last child element. <p class="western" style="margin-bottom: 0.14in"> <font color="#000000"> <font face="Arial, serif"> <font ...

javascriptjqueryhtmlcss

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation

HTML - maximizing the potential of 'learn more' option

Is there a way to seamlessly display the rest of a blog post without redirecting to another page in HTML? I'm looking for a "continue reading" link that, when clicked, will expand the remaining content underneath the current text without reloading the ...

html

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

javascriptcssangularjsfroala

Determine the specific value of an HTML table cell by specifying the column name for a specific row

One challenge I am facing is dynamically creating a table using JSON without knowing in advance the number of columns and/or rows that will be generated. I have successfully added a clicked event for the row that gets selected. In every table, there will ...

javascriptjqueryhtml

Viewing the information stored in a text file hosted on a web server

I need help enhancing the functionality of a webpage on my server. Specifically, I want to display the contents of a text file saved on the server. I am struggling with the syntax, but it seems to involve using Flask along with HTML and JavaScript function ...

javascriptphphtmlflaskxmlhttprequest

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

javascripthtmlangularjs

Unable to compel attention towards entering data

How can I focus on an input after clicking on a span? The input is not initially visible, but becomes visible upon clicking the span. <form action="{{ route('busca') }}" method="get"> <span class="pesquisa-icon"></span> ...

javascriptjqueryhtmlinputfocus

What are the sequential steps to create a CSS/HTML layout efficiently?

As a developer who is familiar with print design but new to web design, I have a designer assisting me in this transition. While I don't need tips on design or usability, I am eager to learn about the step-by-step process of coding a webpage. I want t ...

htmlcss

Bootstrap4 does not support the <button> element

How can I achieve a 'collapse icon' floated to the left followed by Copyright © using Bootstrap 4? I've looked at similar questions on this topic, but none seem to provide a direct answer. Other questions contain different code with ob ...

javascriptjqueryhtmlbootstrap-4

How do you center controls within a repeater control's item template?

I have a repeating control on my page that displays an image and a hyperlink one below the other. When I add more than one line of text, it causes the image to move up. I want the top of the images to be aligned horizontally and the text to flow downward i ...

c#asp.netcss

Is there a way to connect two circles with identical numbers using Javascript and HTML?

My latest project involves creating a fun program that generates 4 balls on the screen, each with a unique number displayed inside. Users can input their desired values for new circles to be generated and then click a button to see four more balls appear ...

javascriptjqueryhtmlarrayscanvas

Ways to restrict the display or height of a select HTML element

Is there a way to minimize the display or height of a select tag? Here is an image of the desired outcome: I am open to using Javascript, jQuery, CSS, or simply converting it to a list format. I just need guidance on how to achieve this or a sample to re ...

javascriptjqueryhtmlcss

Is the format of this HTML tag correct?

I was provided with a code from our design department to add to a page, and since I am relatively new to the design aspect of things, I'm seeking clarification. Is this a valid tag? Also, what does <--if subcontent add rel="test1"--> mean? The c ...

html

Tips for preventing scrolling on iOS in Chrome or Safari using CSS, JavaScript, or jQuery

I've successfully implemented an input element with a click event listener that triggers a function to make another element visible using the CSS rule "display:block;". The element in question has the following styling rules: .elementExample { d ...

javascriptjquerycss

What is the best way to include a line break in a text sourced from a React state?

Here is a functional React code snippet: const about={ text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?', text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?&apos ...

htmlreactjs

Faulty toggle functionality within a JavaScript-created accordion panel

HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...

javascripthtmlcss

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

javascripthtmlmath

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

javascripthtmltwitter-bootstrap