Create a DIV with dynamically expanding width?

Question

I have an interface with some <a> tags, at the end is a div with some more <a>'s that has a display:none attributed to it. When the user clicks a button, it fires some javascript that unhides the hidden div. The problem is I have a border around the containter div, and want it to expand when I unhide the nested div. The issue is that all my anchor tags, in and out of the hidden div, just list horizontally unless I specify a fixed-width. Any help

(aside: Would a <span> be better here over a <div> for the hidden portion?

Answer 1

(aside: Would a be better here over a for the hidden portion?

span is completely different than a div. If as per your design needs you need a block-level elemnts (the one you could give width to), go for a div else span should be fine.

If you want the links to appear vertically, you should apply this style to them:

div a{
  display:block;
}

Or probably:

div a{
  display:inline-block;
}

If you want to maintain the inline characteristics of the links as well.

Answer 2

Markup required I think, but it sounds like all you want is your anchor tags to repeat vertically not horizontally - so just give them display: block no?

And no this doesn't sound like a case for a span particularly since the semantic value is a collection of non-inline child elements.