Show outcomes in a single div with 2 columns

I am having an issue with the arrangement of child elements in a parent div.

Here is the code that I am working with: JSBin

These items are collapsible panels. When all of them are collapsed, everything looks fine. However, when you expand the first or second panel, some unexpected layout changes occur.

Expanding the first panel causes the third panel to shift to the right, while expanding the second panel makes the third panel move down. Is there a way to maintain the original layout throughout?

The only solution I can think of is separating them into two different divs, but this presents challenges as I am using dynamic content and it would be difficult to divide the results into two distinct groups.

htmlcssasp.net

Answer №1

http://jsbin.com/foboqoxi/1

Update the second class from "item" to "item2".

.item2 {
   float: right;
  clear: right;
  width:45%;
  margin-right: 20px;
}

Add a clear left in the existing "item" class.

.item
{
  float: left;
  clear: left;
  width:45%;
  margin-right: 20px;
}

Here is how your HTML should look like:

<div class="item2">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf">
            <div class="heading">
                Second
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №3

   .ic{position:relative;width:500px; hieght:100px; }

   .element{width:240px;position:relative;z-index:10;}

   .element:last-child{width:100%;position:absolute;z-index:1;top:30px;}

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

Is mastering canvas games a worthwhile pursuit?

Being passionate about creating a canvas game, I have some doubts about whether it's worth the effort. Here's why... With Adobe Flash, you can create highly complex animations, games, and apps. It makes me wonder if there will soon be a program ...

javascripthtmlflashcanvasgamecanvas

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

htmlcsscss-selectors

Integrate an input field with a copy function similar to the GitHub clone view

Can anyone help me create a view with a tooltip similar to the one on Github? You can see the example here: https://i.sstatic.net/iBSof.png I attempted to use CSS but couldn't quite replicate the exact UI. Here is my current CSS code: [tooltip] { ...

javascripthtmlcss

Discover an HTML element using Selenium based on its sibling relationship as determined by the program

Trying to find a specific report link but struggling with the generic information provided. The key lies in identifying a span element that can differentiate the link from the rest. Currently, I am using xpath's preceding-siblings method to locate the ...

pythonhtmlseleniumfirefox

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

RegexValidator malfunctions in asp.net

Is there a way to set the MaxLength property of a textbox with multiline in ASP.NET, for example limiting it to 100 characters without using a JavaScript solution? I've tried the following code snippets: <html xmlns="http://www.w3.org/1999/xhtml"& ...

c#asp.net

Is there a way to send multiple actions to Node.js via a dropdown list using POST method?

I have encountered an issue where I am trying to include multiple actions in a single form within a dropdown list. However, I am only able to POST one action at a time. admin.html <form action="/start" method="post" id="tableForm"> <select id= ...

htmlnode.jsexpress

Positioning an image beneath the navigation bar in Bootstrap and CSS without it getting covered by text

I am having difficulty positioning an image below the navbar without it overlapping with the text in the navbar. No matter what I try in my code, the image remains attached to the bottom of the navbar and won't move to a separate row below it. I hav ...

htmlcssimagebootstrap-4

Instructions on implementing getJSON in this code

I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...

javascriptjqueryhtmljsongetjson

Ways to eliminate the default Bootstrap body style within a component's HTML file

I am facing an issue with my angular widget directive where my custom CSS is getting overridden by Bootstrap default styles when I add the widget to another application component. View my Bootstrap CSS here. I am struggling to remove the font-family in m ...

htmlcssangularsassbootstrap-4

Any suggestions for resolving issues with tipsy, SVG, and CSS on Firefox?

Having difficulty getting tipsy tooltips to display correctly next to the cursor in Firefox for my svg elements generated with d3. I discovered a patch that resolves most of the issues, which I found through this helpful answer about Tipsy tooltip position ...

javascriptcsssvgd3.jstipsy

What is the solution for adjusting the positioning of the `<select>` element in Bootstrap?

Here is a snippet of HTML code: <button class="btn">hello</button> <select class="input-small"><option>1</option></select> <button class="btn">world</button> The position of the select element is not correc ...

csstwitter-bootstrapposition

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

javascripthtmlangularjsionic-framework

What steps do I need to take to modify the ASP.Net "App_Themes" folder location?

During the process of upgrading a .Net application from .net 1.1 to 3.5, I encountered an issue with the location of themes. Previously, the themes were stored in a folder named Themes, but the new .Net 3.5 framework requires them to be in a folder called ...

.netasp.netconfigurationweb-configthemes

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

Dynamic content displayed within adjacent div elements

I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relati ...

asp.netcsshtml

Toggle functionality not functioning correctly when clicking on two elements simultaneously

When I click on the input and the div with class "checkmark", I want the div tag with id "hidden-gift-order" to be hidden. However, clicking on the input works as expected but clicking on the div tag does not. Can someone explain why? function Toggle_Vi ...

javascripthtmlbootstrap-4

PostBackUrl="javascript:void(0);" prevent postback from occurring for all controls within the webpage

Is there a way to prevent postback for a specific control on the page? I've managed to achieve this successfully. However, after clicking on that control, all other controls on the page do not trigger any postbacks. Everything was working fine until I ...

javascriptjqueryasp.net.net

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

htmlcssbootstrap-4

The age calculator is failing to display the accurate age calculation

This code is designed to compute the age based on the selected value in the combo box, and display the result in the text box below. The age should update every time the user changes the selected value in the combo box. However, the computed age is not cur ...

phpjavascripthtml