div inside fieldset doing weird things

**gib65** · 06-28-2015, 05:51 PM

I'm encountering some really weird behavior with a div inside a fieldset. Please have a look at this code:

Code:

<html>
<head></head>
<body>

<fieldset style="width: 50%;">
<legend>legend</legend>
<div style="background-color: blue; display: table-cell; width: 50%;">
This is a fieldset.
</div>
</fieldset>

</body>
</html>

The div is definitely not 50% of the fieldset in width even though it's set to be.

What's even weirder is that if I set the div to be 100% width, it takes up even less space.

Does anyone know what's going on here?

**Beverleyh** · 06-28-2015, 07:42 PM

The div is actually doing exactly what you have told it to because you have set its display to table-cell. I'm not sure why you're doing that but it might help if you read the specs to understand what is happening - see the section on Anonymous Table Objects, where missing container/parents are being generated around the lone table-cell http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

**gib65** · 07-03-2015, 02:18 AM

The quote from that site that seems most relevant to me is this:

"1.For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes."

So it's creating a table-row div around my table-cell div. (Would it then create a table div around the table-row div?)

But I'm still not understanding why the width doesn't look like 50% of the fieldset, unless the table-row div is some odd arbitrary percentage of the width of the fieldset, but why? Furthermore, that doesn't explain why setting the width to 100% makes it even shorter.

**Beverleyh** · 07-03-2015, 05:33 AM

The specs are your friend and you can find out all you need to know there : http://www.w3.org/TR/CSS2/tables.htm...d-table-layout

Also look into default element padding and the effect on the box model

Thread: div inside fieldset doing weird things

Thread Tools

Search Thread

div inside fieldset doing weird things

Similar Threads

Div in a fieldset

Resolved Javascript possibly at fault - ajax loads page, page does weird things

Weird ul behavior inside p

php processing script doing weird things

fieldset tag

Bookmarks

Bookmarks

Posting Permissions