ronsansolo — 2012-01-08T10:14:35-05:00 — #1
I'm working on a template that has a sidebar breadcrumb navigation, which is an unordered list. The <ul> is automatically assigned an ID (#breadcrumb) and the css has a fixed height for this ID. This <ul> is not in its own div.
Is it possible to not have a fixed height for the <ul> tag, but instead have the height automatically expand as more content is added to the list? Or is the only way to do this is to wrap the <ul> in a div?
stevie_d — 2012-01-08T10:22:37-05:00 — #2
The best plan is just not to set a height on #breadcrumb, and it will automatically take up whatever size it needs to fit the contents. There's no need to worry about whether it's in a <div> or not – you can apply pretty much the same CSS to any block elements as you can to a <div>.
ronsansolo — 2012-01-08T10:30:51-05:00 — #3
I've tried that, removing the height from the css and it just collapses behind the <ul> "content". I forgot to mention that the #breadcrumb has a background color, so it's easy to see that the height collapses and the height doesn't expand to fit the content.
stevie_d — 2012-01-08T10:43:38-05:00 — #4
Are the <li>s inside the <ul> floated? If so, add
overflow:hidden; to #breadcrumb.
Failing that, if you give us a link to the page then we can see what is really going on!
ronsansolo — 2012-01-08T10:49:46-05:00 — #5
Thank you Stevie!