webcomic_list_storyline div height issue on archive page

[ashikai]

I really hate to ask this of you, but I've exhausted my resources at this point.

I'm actually really familiar with divs not adjusting their heights to match content. Usually I can solve the issue by adding a clear:both;, height:100%;, and/or overflow:auto; depending on the circumstances, but my usual tricks don't seem to work here.

My archive page's container div will not stretch its height for anything. The bizarre thing is that I don't think it's got anything to do with the actual div styling, but it's actually an issue with the page itself. I say this because I swapped my container divs (archive-cont for webcomic-container) and the issue still happened despite the fact that webcomic-container works perfectly everywhere else on the site that it's called.

(I've tried this with all the archive tags (cloud, list, dropdown, etc) and the result is the same.)

Visual explanation: http://shamrockcomic.com/archive/ <--On this page I'm trying to get everything that's bordered with blue and yellow into that red box and make the parent container (the grey BG) stretch vertically to fit.

Is there something specific about the archive page's styling that I'm missing? I've included all the relevant pieces of code below. Please let me know if you need additional information! Thank you so much for your help!

Archive Page code

```

'webcomic1', 'hide_empty' => true, 'target' => 'first', 'ordered' => false, 'show_image' => true ) ); ?>

```
_Relevant styles_ ``` .wrapper { margin: 0 auto 0 auto; } #main { display: block; width:1000px; background:#222; margin:0 auto 0 auto; padding:15px; } .archive-cont{ display:inline-block ; border:1px solid red; width:100%; } ul li.webcomic-term{ display:inline-block; border:1px solid blue; padding:5px 5px 0 5px; } ul li ul.children{ width:950px; border:2px solid yellow; } ```

[mgsisk]

It looks like there's a float: left; and (more importantly) a height: 125px; on the .webcomic-terms class. Removing the height should fix the grey box, but I'd remove the float as well (unless you need it for something).

[ashikai]

....That was a forest for the trees kinda thing, wasn't it?

I will say this though; it's really confusing when each of these different calls uses the same CSS classes. I was using the webcomic storyline dropdown with the float, and on the archive page I was using webcomic list storyline. I guess I didn't expect them to have so much overlap with the naming. It's actually kinda complicated to work with the styling here because of that. Sorry for all the redundant questions. =T

[mgsisk]

The default classes can get a little confusing when you're using several similar template tags for very different purposes, but there are a few ways to differentiate everything. You could narrow the archive page's classes by specifying the element, for example: ul.webcomic-terms or select.webcomic-terms. All of the various archive template tags – including webcomic_list_storylines also accept a class argument for specifying your own CSS classes to add to them for easier styling.

[mgsisk]

Site's looking good, btw! Very few people (that I'm aware of, anyway) take the time to build a custom theme.

[ashikai]

I haven't played much with the class argument a little bit, but didn't think to do it here because it didn't occur to me that there was a lot of term crossover. I'm doing some stupid specific targeting instead which will probably drive me crazy if I ever go back into the code to adjust things way later, but that's ok. XD

And Thanks! I'm going to be building about 8 more of them (in the next 2-3 months), and hopefully I won't drive you crazy with these questions I REALLY should be able to answer on my own. ^^a This one's serving as my learning zone/playground and helping me put together a blank custom template.

Thanks again for all your help!