views:

23

answers:

1

Alright, I got some help earlier with this, but it never truly got resolved. I'm pretty sure I'm having a CSS issue, but I just can't figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.

The problem I'm having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.

Here's the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the "View Comments" to "Text Here" area, as you can tell it has outrageous space between the two.

The other issue is, as I currently have it I'm forcefully indenting the article text so that it doesn't TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it's proving to be difficult for me.

I've put up a demo here: http://www.notedls.com/demo

A: 

You can define this in your CSS to set the height:

.acc2 { height: auto !important; }

Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.

Nick Craver
Thanks for that, how bout this text-wrapping issue?
Josh
@Josh - With your current layout, the `padding-left` like you have is the simplest approach, is there some problem I can't see?
Nick Craver
It might just me being picky. I really wanted to keep the whole "News" area confined to 542px, but I guess I'll just have to increase it to 557px in order for zero chance of text-wrapping.
Josh
@Josh - You can increase the left padding on that inner div, or change it to margin, and reduce it's actual `width:` value, should keep the overall width the same.
Nick Craver
Thanks for the help!
Josh