ansaurus

Question

Set the width of a `<fieldset>` to the width of the largest containing element

Answer 1

+2 A:

Do you mean this: jsFiddle fieldset that is wide as biggest containing input-element

It is a floating fieldset. If you want it in another way, please let us know.

Justus Romijn 2010-10-26 09:04:13

Even works in IE6. Nice.

Pekka 2010-10-26 09:07:27

@Pekka As always: make the magic of overflow:hidden; do the trick for you :)

Justus Romijn 2010-10-26 09:09:03

Answer 2

A:

Just put your question in a general context. A <fieldset> is a block element, thus its default behaviour is to expand to fill the available horizontal space. So you basically have two options:

Set a new explicit width.
Change its layout from block to something else.

Here's a quick example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
fieldset.explicit-width{
    width: 1%; /* Will expand to fit content */
}
fieldset.inline-block{
    display: inline-block;
}
--></style>
</head>
<body>

<fieldset><legend>Unstyled</legend>
    <p><input type="text" size="2"></p>
    <p><input type="text" size="20"></p>
    <p><input type="text" size="50"></p>
    <p><input type="text" size="30"></p>
</fieldset>

<fieldset class="explicit-width"><legend>Explicit width</legend>
    <p><input type="text" size="2"></p>
    <p><input type="text" size="20"></p>
    <p><input type="text" size="50"></p>
    <p><input type="text" size="30"></p>
</fieldset>

<fieldset class="inline-block"><legend>Inline-block</legend>
    <p><input type="text" size="2"></p>
    <p><input type="text" size="20"></p>
    <p><input type="text" size="50"></p>
    <p><input type="text" size="30"></p>
</fieldset>

</body>
</html>

Update: I forgot to mention that floating a block-level element also changes its layout.

Álvaro G. Vicario 2010-10-26 09:08:13

ansaurus

tags:

views:

answers:

Set the width of a `<fieldset>` to the width of the largest containing element

related questions