| Sven Rudolph 2006-08-17, 6:44 pm |
| spolsky wrote:
> hi,
> i have the following html. i don't want to set size for div and i want
> to have it get the size (especially shrink) of its content but it
> resizes to the width of the page.
div is a block element, which means, it always uses the whole line, or the
whole available horizontal space.
> i tried the span instead of div
> element but it leaves some horizontal space after it.
span is an inline element, which means, it only uses the space of its
content.
http://www.w3.org/TR/html401/struct...l.html#edef-DIV
> so i'd like to
> know what's the best way compatible with common browsers(if possible
> with styles) to get the element shrink to its content while the next
> element coming after it positioned and displayed expectedly.
This depends on the kind of content you are talking about : text, images,
applets, objects.
Maybe you could post an URL to your page, so we can see, as a whole, what
you're trying to achieve.
BTW:
Your missing a form element here. If you expect your stylesheet definitions
to work as expected, you have to write correct markup.
> <div style="background-color:#E0053A;">
> <span>A title</span>
> <select>
> <option value="">1</option>
> <option value="">2</option>
> <option value="">3</option>
> </select>
> </div>
Maybe this works for you:
<h1>A title</h1>
<form style="background-color:#e0053a;" action="somewhere">
<label for="choice">Choose your poison</label>
<select id="choice">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
Sven
|