2-column; multi-accordion pane

Question

Alright, I'm having some issues and I believe it's a CSS one. Here is what I'm working on currently: http://www.notedls.com/demo/

Focusing on the News accordion menu. The idea here is to have a small image (50x50 with padding) and then a huge headline next to it. When the user clicks the headline, it expands to the article. If the user wants to read comments or make a comment themselves they can then click the View Comments to expand it even further.

The issue I'm having (if it isn't clear) is the spacing with the image and the text. I could simply just increase the height of the ui.accordion-acc or -left to make everything fit, but that doesn't solve the issue. If you notice when you click on the first expansion of Headline 1, it will wrap View Comments underneath the image. This is something I don't want, I've tried separating these elements into additional divs and even floating, but its just not working. Essentially, I want blank space infinitely underneath the image for however long the article+comments may take the field.

Answer 1

Try adding this CSS:

ul#acc1 .acc1 { padding-left: 50px; } /* headline */
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */

I had to reduce the block size of the view comments since it was pushing out to the right. Adjust the 50px, 55px, 487px ( set width of 542px minus 55px ) and 20px ( just indenting the comment a little more ) to match the thumbnail size.

---

Well the problem is there is an accordion within an accordion, so when you add the generic accordion CSS classes like ul.ui-accordion-container li a.ui-accordion-link it affects both levels. This is why the comments moved down 62px.

You already have more specific classes you could use... try this ul.ui-accordion-container li a.acc1 but I wouldn't recommend adding a height to the link, but instead add it to the <h1> to match the thumbnail height. So try this:

h1 {
 float: left;
 margin: 0px;
 padding: 1px;
 font-size: 30px;
 color: #9667cc;
 height: 65px;
}
ul.ui-accordion-container li a.acc1 { 
 display: block; 
 padding-left: 5px; 
 margin-right: 3px; 
 height: 62px;
 color: #000; 
 text-decoration: none; 
 line-height: 28px; 
}
ul.ui-accordion-container li a.acc2 { 
 line-height: 28px; 
}

Answer 2

How come floating didn't work? I would think you could do something like:

.img {float: left; width: 50px; padding: 5px;}
.title {float: left; width: 300px; padding: 5px;}
.clear {clear: both; height: 1px;}

<div class="img"><img src="img/news_ffxiv_a.jpg"></div>
<div class="title">TITLE</div>
<div class="clear"><!-- --></div>

This should create unlimited space under the image since the other div is floated left against it. The key is to float both items, not just one.