Position dividers

Question

I work with jQuery accordion. So my code is as follows:

<h3><a href="#">Test </a></h3> <div class="accordion" style="background-color:yellow;"> <div class="test_1"> my first dynamic content div </div> <div class="test_2"> my second dynamic content div </div> </div> 

So you see that H3 is “consonant” if I click on the fact that the div accordion opens with two separate divs. It all works, but the positioning of my 2 sections inside the Div accordion fails. I would like to get them UNDER eachother, but both divs are generated dynamically, which means that I do not know the size of the first div (test_1), so I can not position the pixels. I already tried with some br tags, etc., but nothing works. Is there a way to do this in css, possibly using float or something else, or should it be done inside html? Other ideas?

Hi,

T

Answer 1

I think you can handle this css

the first method sets a constant-width rule for any div in the class accordion

 .accordion div { width:150px;or 100% up to your design } 

The second way is to set up another class for your div (s) i.e.

 .w150px { width:150px;or 100% up to your design } 

But this time you have to add your css classes to the test

 <div class="test1 w150px"> ... 

Best wishes
Myra

Answer 2

I think if you use an unordered list instead of a div, everything could fall into place.

 <h3><a href="#">Test </a></h3> <ul class="accordion" style="background-color:yellow;"> <li class="test_1"> <p>my first dynamic content div</p> </li> <li class="test_2"> <p>my second dynamic content div</p> </li> </ul> 

Answer 3

I will explain a little better with some code:

SO let's take an example, I have 4 elements dynamically created. I have 2 divs inside the 'accordian' div as above, namely test_1 and test_2. There can be three elements on a div that are dynamically created. SO in the first div test_1 there will be 3 divs (because there are 3 elements), and in the div test_2 there will be 1 div (the 4th element that is dynamically created). With css Myra, INSIDE elements were posted, div test_1 is positioned under eachother. But I want to see that div test_2 falls under div test_1. Thus, the 4th element should basically be under the three elements, regardless of the height of the three elements (div test_1). Hope I have provided you with the best information.

 <div style="background-color:yellow;"> <div class="test1"> <div class="inner_test1"> this div gets dynamically generated, so in our example there will be 3 of these inside test1 </div> </div> <div class="test2> <div class="inner_test2"> The 4th element gets generated inside this div, if there are 5 elements the 4th and 5th element will be 2 divs of inner_test2 </div> <div class="inner_test2"> So this is the 5th element for example </div> </div> </div> 

So div test2 should be located under the division test2.

Answer 4

It’s hard for me to understand your problem. But here are three points that I would check. 1 - Make sure all your tags are properly closed. If you have a missing tag, this may affect the way your layout is displayed 2 - If the objects do not fall under each other, make sure that there are no floating styles in the div 3 - If you manually set the height of the element and then added content, you don’t Will have room for a new item.

In short, without actually viewing the actual html image, it would be quite difficult to diagnose.

Answer 5

Whether you use the jQuery user interface, or use the "JQuer Accordian", which is more or less a series of shows and hides (which are used more often, I would think).

In any case, try adding "display: block" to the CSS of the inner_test2 class. That should work.

Depending on how you install your jquery (if you are building an accordion using only the regular jquery library), you should be able to add shows to the callback or hide and insert the block after (That if it removed the display: block).

Answer 6

I think all you need is to set these properties for divs

 #test_1, #test2 { width: 100%; height: auto; display: inline-block; /*oryou can use just inline*/ margin : 0px;/*this is not necessary but it is better to put it to reset incorrect margin set by browser */ } 

Answer 7

I know this is terrible for many pure CSS people to consider, but if you put a tag
after his first div_ test_1 (if this is an option, since you mentioned that part of the content is automatically created) it can solve the problem.

 <div class="test_1"> my first dynamic content div </div><br /> 

Answer 8

 display: inline-block;