Posted by Yehuda Katz on 12/05/71 11:39

I need a way to have the width of a div automatically equal the inner
content.

My HTML:

<div class="botstrip" id="aboutstrip" style="display: none;">
<a href="#">About 1</a><p>|</p><a href="#">About 2</a><p>|</p><a
href="#">About 3</a></div>

My CSS:

div#pagewrapper div.botstrip a {
padding-left: 10px;
padding-right: 5px;
color: #091A86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}

div#pagewrapper div.botstrip p {
padding: 0;
margin: 0;
display: inline;
}

I set the display: none because I will unhide it later.

In Firefox, it works perfectly, and the <div> is only as wide as the
containing elements. In Internet Explorer, the <div> expands to the
width of the container.When I try to set width: 0px, which would
normally work, it breaks up the containing elements onto separate
lines.

Thoughts?

[Back to original message]