Arranging a content container beneath a div containing an image

On a webpage I am working on, there is a div that contains an animation with images that change using CSS. Below this animation is a wrapper div for the content structured like this:

<div id="animation">
     <img ...>
     ...
     <img ...>
</div>
<div id="content">
     Some content
</div>

I have experimented with various methods such as floats, clear, and positioning, but I cannot get the content div to stay below the animation div without overlapping. The only partially effective solutions I have found involve setting the height of the first div to match the images (which are all equal width and height), but this causes issues on different screen resolutions. Another option is to set the image height to 100% and apply the aforementioned fix, but then the images look distorted on various resolutions.

Is there a way to achieve my desired layout using only CSS?

Edit: JSFiddle

Edit 2: I followed this tutorial for creating the changing images.

csshtmlheightpositioning

Answer №1

One issue you may encounter is when all the content in the top div is set with position:absolute. This causes the top div to have a height of 0px, as it doesn't know how tall it needs to be.
A solution to this problem is to have at least one image within the div that is not positioned; this will dictate the height of the top div and allow the content div to flow below it.

#cf4a img {
    position: absolute;
    left:0; top:0;
    width: 100%;
}

#cf4a img:first-child { /* set the first non-positioned child */
    position: static;
}

Check out the updated fiddle for reference

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

How can you incorporate a horizontal line beneath your text, similar to the one shown in the

https://i.sstatic.net/OzMVr.jpg I have a code snippet that needs a horizontal border similar to the one shown in the image <section class="about"> <div class="container"> <h1 class="text-center"> ...

htmlcsstwitter-bootstrap

Collapsed items within a Bootstrap accordion using th:block

Hello, I am having trouble with displaying objects on my website. I have received some data from the database and I would like to display it in an Accordion collapse format (similar to Bootstrap's example). Currently, all the objects are opening up on ...

javahtmlbootstrap-4thymeleaf

Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...

htmlcss

Issue detected: The PNG file being used with jspdf is either incomplete or corrupt

I am trying to insert two images into my pdf when the "create-pdf" icon is clicked. The first image is a canvas that converts to an image successfully. var canvas = document.getElementsByClassName("jade-schematic-diagram"); img = canvas[0].toDataURL("imag ...

javascripthtmljspdf

Tips for beginning the process of creating a website's user interface

After initially developing my system without any styling, including bootstrap and CSS, I now find myself needing to add them. While I have reviewed the concepts on W3Schools and have a basic understanding, I am struggling with the sequence of implementat ...

phphtmlcssbootstrap-modalbootstrap-4

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

javascriptjqueryhtmlcss

What is the best way to assign classes to the appropriate element based on the counter value?

Is there a way to add a class to the element that corresponds to a counter in jQuery? I currently have this code: var li_counter = 0; $("#trigger_heritage").click(function () { if(heritage_position >= heritage_versatz*13){ li_co ...

javascriptjquerycss

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Why does the second JavaScript form validation not function correctly when compared to the first?

Here is a form that I have created: <form action="next.html" id="userInput" method="post" onsubmit="return validate();"> Age: <input type="text" name="age" id="age"/> function validate() { var age = document. ...

javascripthtmlforms

Why is it that the date selector is missing in Firefox?

When using the provided HTML code, a date selector will appear on Google Chrome: <html> <head> <title> </title> </head> <body> <form> <input type="date" /> </form> </body> However, ...

htmlgoogle-chromefirefoxdatepicker

Having issues with the Page inspector and viewing in browser feature in VS2012?

I'm a beginner in the world of website development and I'm facing issues with viewing my webpage on a browser. Every time I attempt to open the page inspector or choose "view in browser," I encounter the following error messages: Page Inspector ...

htmlasp.netvisual-studio-2012

Navigate to the end of a container

Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...

javascriptjqueryhtmlcssscroll

find the intersection point of two elements

Is it possible to identify the exact point where two elements overlap? Take a look at the code snippet below that demonstrates what I mean: <html> <head> <style> body { height: 100%; margin: 0; padding: 0; ...

javascripthtmlcss

What are alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Looking to create a div element that only expands from the left side as content is added? <div id="sent_message" style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: ...

javascripthtmlcss

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

I'm having an issue with customizing a video player in HTML5. When I press play on the top video, it automatically plays both videos on the page simultaneously. For reference, here is my code on jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/ Bel ...

javascripthtmlcssvideo-player

Is there a way for me to choose the ID and retrieve its value from the input data within this particular row?

Here is what I am trying to accomplish. When the modify button is clicked, I want the div with role 'ucomment' to transform into an input form with its original value pre-filled. However, I am having trouble selecting the specific div. I attem ...

javascriptjqueryhtmlcss

Utilizing Tailwind CSS for Advanced DIV Placement

My goal is to arrange the DIVs inside the container in a way that the top DIV (containing text) overlaps the DIV next to it. Below is a sketch of what I have in mind: https://i.sstatic.net/kUVGT.png This is the HTML code I have written for this layout (Ta ...

cssflexboxtailwind-css

Controlling the Sequence of HTML Rendering in ASP.NET MVC

I have a pretty simple website setup. On the left side, I have a tree menu (using the Telerik component), and when a choice is made from the tree, the main content of the page is populated with static HTML content. Each tree click triggers a full page relo ...

htmlasp.net-mvcrendering

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this ef ...

jqueryhtmlcssfadeinfadeout