CODEWITHSUNDEEP
htmlcss
user1943020
user1943020

Reputation:

What is the CSS property that makes a <fieldset> fully enclose it's contents?

I am using <fieldsets> to group but it always gives me a message in the IDE saying that the <legend> is missing. I decided to try and simulate the <fieldset> with a <div>.

.grid-select .group {
  border: 1px solid #d9d9d9;
  padding: 12px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
  margin-bottom: 1.667em;
  position: relative;
  z-index: 89;
  padding-top: 1.667em;
}

This does not work for me as it seems like the <div> does not wrap around other <div> elements inside my fieldset in the same was as when I used <fieldset> .

Is there some other property that a <fieldset> has that I don't have?

Note that inside the .group the <div> have display: inline; and float: left

Upvotes: 2

Views: 373

Answers (1)

deceze
deceze

Reputation: 522442

Note that inside the .group the have display: inline; and float: left

This is exactly the problem. Floated elements do not contribute to the height of their parent. In other words, the surrounding div thinks the floated elements non-existent. A good workaround for this is to set the .group to overflow: hidden, which does cause it to consider all children for its size calculation.

But legend elements are optional. If only your IDE is complaining about it, fix the IDE. You shouldn't substitute a fieldset for a mere div only for that reason.

Upvotes: 2

Related Questions