div inside fieldset doing weird things

Printable View

06-28-2015, 05:51 PM
gib65

div inside fieldset doing weird things

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?
06-28-2015, 07:42 PM
Beverleyh

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
07-03-2015, 02:18 AM
gib65

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.
07-03-2015, 05:33 AM
Beverleyh

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