views:

249

answers:

8
+4  Q: 

Positioning divs

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

+1  A: 

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

Myra
the problem is that my test_1 and my test_2 aren't showing UNDER eachother... so you sure this could be the solution?
Thomas
can you share your css ?
Myra
Oki i did that one, and that positions all of my elements inside the test_1 div under eachother, not the 2 divs seperated under eachother, it's little bit tricky so i explain more:Inside div test_1 there is dynamic content, so there are 3 seperate divs generated (if the content contains 3, if 4 there are 4 divs) again that should be next to eachother (this works, is not a problem) but when i got 4 divs , the content of the 1st div could cut so in div test_1 i've got 3 divs inside test_1 and the 4th element gets inside div test_2. The problem is positioning div test_2 under div test_1.
Thomas
If you think you have found the problem,then you should accept an answer which means answer your question as we did and accept it.
Myra
please check back my answer, because i didn't found the problem yet, your solution just made my inner divs positioning under eachother and that's not what i want. I explained bit more
Thomas
Like i said before when putting width on test_1 this splits my elements inside of it under each other but it has to split test_2 under test_1...
Thomas
A: 

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.

Thomas
Just a FYI on stackoverflow etiquette: You should edit your original question and put this in, rather than adding this as an answer.
pinkgothic
A: 

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.

Joseph Connolly
The problem is more or less that inside inner_test2 the height is dynamically determined, what means that it can be 50px, but it can be aswell 150px depending on how many items there are getting inside of it. When setting a fixed height it's no problem to get them under each other... but everytime the height is determined based on the content appearing the divs inner_test2 won't show how i would like to.basically when i got 4 inner_test2 items i want 3 inner_test2 items near each other and the 4th inner_test2 i want right under the 1st inner_test2 element
Thomas
A: 

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).

Pyronaut
+1  A: 

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>
superUntitled
A: 

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 */
}
Nasser Hadjloo
A: 

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 />
Freebytes
A: 
display: inline-block;
travismillward