Log in

View Full Version : 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:



<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.html#fixed-table-layout

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