The similar divs are overlapping instead of stacking on top of each other

I am currently working with a div element that will contain some content, and I need to replicate this div multiple times below. However, when I do so, the content ends up overlapping instead of stacking neatly.

Upon inspection, I noticed that the height of the container is not set. Shouldn't the height adjust automatically based on the content within the div? I'm a bit confused as I thought that was the case.

If you'd like to take a look, here's the link to my fiddle: http://jsfiddle.net/5jq52/2/

<div class="row">
<div class="col-md-5">
<div class="Mycontainer">
    <div class="Item1">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
    <div class="Item2">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
</div>
<div class="Mycontainer">
    <div class="Item1">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
    <div class="Item2">
        <img src="http://placehold.it/150x150" class="Pic">
    </div>
</div>
</div>
</div>

Thank you for taking the time to review and address this issue. ;)

htmlcsstwitter-bootstrap

Answer №1

The issues you're facing are quite varied. The overlapping of your divs and lack of stacking is a result of using position: absolute; instead of position: relative;.

Answer №2

The issue seems to be caused by setting the position:absolute on the wrappers. This will take your content out of the normal document flow, resulting in the remaining content overlapping to fill the space.

Here's a Fiddle showcasing your scenario with position:absolute; being commented out.

If you aim to float the images in each container next to each other without explicitly defining a height for the parent container, then applying overflow:hidden to the parent element is necessary.

Answer №3

Perhaps adjusting the position attribute to position: absolute for each element could prevent them from overlapping. Consider creating additional div elements if necessary to achieve your desired layout. I trust this advice will be beneficial to you!

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

The horizontal display list is experiencing issues when using the display inline property

I'm having trouble getting my list to display horizontally. I've tried using display: inline, as well as float: left; and position:center, but can't seem to get it centered properly. JavaScript Array.prototype.map.call(document.querySelect ...

htmlcsslisthtml-lists

Ways to customize decoration in Material UI TextField

Struggling to adjust the default 14px padding-left applied by startAdornment in order to make the adornment occupy half of the TextField. Having trouble styling the startAdornment overall. Attempts to style the div itself have been partially successful, b ...

javascriptcssreactjsmaterial-ui

Positioning a div in the center horizontally may result in content with a large explicit width being

I am in search of a solution to horizontally center content on a webpage, regardless of whether or not it has a defined width. After referencing a Stack Overflow question on centering a div block without the width, I found a great method that works well w ...

javascriptjqueryhtmlcss

What is the best way to focus the video on its center while simultaneously cropping the edges to keep it in its original position and size?

I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...

javascripthtmlcssvideozooming

creating an interactive image with Angular

I am experiencing difficulty in making my image clickable. The image is designed as a cart with a small number bubble indicating the quantity of items in the cart. Although the div itself is clickable, the photo within it is not. Below is my code snippet: ...

htmlangularimageclickable

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...

jqueryhtmlcsswindows-phone-8fluid-layout

What is the method to assign a value to ng-class in Angularjs?

I need to categorize items in a list by assigning them classes such as items-count-1, items-count-2, items-count-3, items-count-4, based on the total number of items present. This is how I would like it to appear: li(ng-repeat="area in areas", ng-class=" ...

javascripthtmlangularjs

What is the best way to present sorted items on a user interface?

I have a unique Med interface containing properties like drugClass, dosage, and name. Using this interface, I created an array of drugs with different attributes. How can I filter this array by drugClass and then display the filtered data on a web page? ...

htmlcssreactjstypescriptnext.js

Attempting to integrate AngularJS with the CodeIgniter framework

I am currently facing an issue while trying to integrate AngularJS with Codeigniter. Despite not receiving any errors, the data is not displaying as expected. I am eager to learn how to develop a RESTful application using AngularJS and Codeigniter. If anyo ...

htmlangularjscodeigniter

JavaScript file does not execute onload function

Whenever I try to execute the window.onload function from my .js file, it seems to not be firing as expected. <script type="text/javascript" src="{% static 'jsfile.js' %}"></script> window.onload = function() { alert(' ...

javascripthtmldjangoonload

The behavior of the div element is not as expected when using "<select>", but it functions properly when using "<input>"

I found this code snippet on http://jsfiddle.net/Lijo/PJcZQ/. It features two divs labeled "GROUP1" and "GROUP2" with slightly different content. GROUP 1 <div class="secondTextBox"> <select name="ctl00$detailContentPlaceholder$ddlStatus" id= ...

htmlcss

Ways to showcase a textbox input in different DIVs multiple times

I am struggling to showcase the content of a textarea within multiple div elements when a user inputs text. The value only appears in the first div, but I want it to display in every div. Here is my HTML and jQuery code: <input type="textarea" id="my ...

jqueryhtml

JavaScript Character Set on the Dynamic Page in Delphi

Within my Delphi application, I am dynamically generating HTML content. Displaying UTF-8 encoded strings in the webpage body is not an issue for me as I use HTMLEscape to encode regular strings (ensuring all strings in the list are properly escaped). The ...

javascripthtmldelphiutf-8delphi-xe

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

I have an urgent task to develop a web page where users can input data, and the backend will perform calculations and display the result below the input field on the same page (similar to checking online air ticket prices). I am new to Django and HTML. Be ...

htmljquerydjangoajaxforms

Align multiple elements in a responsive fixed container

I have been attempting to center multiple elements, including images and buttons, within a fixed div at the top of the screen. Despite trying various tricks I found online, none seem to be effective. My goal is to ensure that the alignment works seamlessly ...

javascriptjqueryhtmlcssnavigation

Include a picture and a division element within the dropdown element

I've encountered a few challenges while trying to personalize a profile dropdown component using Semantic and React. First, I am facing an issue where my application crashes when I attempt to place a div inside the Dropdown.Menu with the error message ...

cssreactjsdrop-down-menusemantic-ui

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

phphtmlcsswordpress

Changing the color of the navigation bar using jQuery and implementing a scroll follow feature on

Looking to update the color scheme of my navigation bar and text links similar to this website: . I've searched for solutions but only found information on changing size, not the background color, and there's also a feature indicating the current ...

jquerycsscolorsnavigationuinavigationbar

Tips for inserting a PHP variable into an SQL query

Here is the code I'm currently working on: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> < ...

phphtmlsqlforeachnavbar

What is the best way to deselect the first radio button while selecting the second one, and vice versa, when there are two separate radio groups?

I am looking to achieve a functionality where if the first radio button is selected, I should receive the value true and the second radio button should be unselected with the value false. Similarly, if the second radio button is selected, I should receive ...

javascripthtmlangular