Positioning divs

Question

Hi all,

I'm working with the Jquery accordion. So my code goes like this:

<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 the H3 that's the 'accordian', if i click on that the div accordion opens with inside 2 seperate divs. That all works but the positioning of my 2 divs inside the accordion div fails. I should like to get them UNDER eachother, but both divs got generated dynamically what means that i don't know the size of the first div (test_1) so i can't position on pixels. I already tried with some br tags etc but nothing seems to work. Is there a way to do this in css maybe with float or something or should it be done inside the html ? ANy other ideas?

Regards,

T

Answer 1

I think you can handle that by css

first way set a constant width rule on any div under accordion class

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

second way is to set one more class for your div(s) i.e.

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

But this time you should add your css classes into test

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

Best Regards
Myra

Answer 2

I explain little bit better with some more code:

SO let's take an example, i've got 4 elements dynamically created. I've got 2 divs inside the 'accordian' div as posted before namely test_1 and test_2. Per div there can be 3 elements that get 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 gets dynamically created). With the css Myra posted the elements INSIDE the div test_1 are getting positioned under eachother. But what i want to see is, that div test_2 gets positioned under div test_1. So the 4th element basically have to be UNDER the 3 elements no matter what the height of the 3 elements (div test_1) is. Hopefully i provided you with better 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 has to be positioned UNDER div test2.

Answer 3

I am having difficulty understanding your issue. But here are the three items I would check. 1 - Make sure all of your tags are properly closed. If you have a missing tag, that might affect how your layout is rendered 2 - If items are not falling under each other, make sure there are not floating styles attached to the divs 3 - If you manually set the height of an item and then add content, you items will not necessarily make room for the new item.

Short of that, without actually seeing the actual html rendered it would be quite difficult to diagnose.

Answer 4

Are you using the jQuery UI accordian, Or using the "Jquery Accordian" which is more or less a series of show and hides (Which is used more commonly I would think).

In anycase, Try adding the "display:block" to the CSS of the inner_test2 class. That should work.

Depending on how your jquery is set out (If you are building the accordian using just the regular jquery library), you should be able to add in a call back to the show or hide, and stick the block on after (That is if it removed the display:block).

Answer 5

I think that if you use an unordered list instead of divs, things might fall right 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 6

I think all you need is to set these properties for both of 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 it is ugly for so many pure CSS people to consider, but if you put a
tag after your first test_1 div (if that is an option since you mentioned some of the content is automatically generated), it may fix the issue.

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

Answer 8

display: inline-block;