Why Do <Fieldset>S Clear Floats

Why do fieldset s clear floats?

Apparently <fieldset> elements are supposed to generate block formatting contexts for their contents:

The fieldset element is expected to establish a new block formatting context.

That's why floated elements don't float out of them. I would guess that this has to do with the nature of fieldsets as visual form control groups. There could be other reasons, but off the top of my head that sounds the most plausible.

There doesn't appear to be a way to undo this, but I wouldn't be surprised; you can't destroy a block formatting context after creating it.

By the way, <fieldset>s don't clear floats (unless you give them a clear style of something other than none). When an element clears floats (or is said to have clearance), it clears only the preceding floats that touch it within the same formatting context. A parent element doesn't clear its children's floats either, but it can establish a formatting context for them to float in. This is the behavior seen with <fieldset>, and it's also what happens when you set overflow to something other than visible on a parent element.

From the spec (emphasis mine):

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Additionally, as mentioned in the comments, there is no clearing style defined by browsers for that element, so the default clearing style would already be the default value of none. This is shown in this demo, in which only one of the <fieldset>s coming after the floating box is defined to have clearing properties and is indeed the one clearing the float.

.float {
  float: right;
  background-color: red;
  height: 200px;
}

.clear {
  clear: right;
}

<div class="float">Float!</div>
<fieldset>
  <legend>Fieldset!</legend>
</fieldset>
<fieldset class="clear">
  <legend>Clearing fieldset!</legend>
</fieldset>

How come when floating a div inside a fieldset to the left, it actually floats right?

It actually works fine with me. It floats to the left, instead to the right.

Here's something that I tried,

Index.html

<html>
<head>
<title></title>
<LINK REL=StyleSheet HREF="index1.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<fieldset>
<div> </div>
</fieldset>
</body>
</html>

and index1.css

fieldset
{
  float:  left;
  width:  200px;
}
fieldset > div
{
     float:  left;
     width:  100px;
  }

and the fieldset is on the left.

Have a look here : Floating div to left inside the fieldset

How do I float these fieldsets?

Check If you can do the following changes.
I just added class

  .wizard-parentcontrol div
  {
     float:left;
  }

and removed the hardcoded width's of 33% and 30% from your code.

Check the demo

Fieldset left and right css

It has to do with the "size" settings of your input fields. Change them all to 20 and they do what you want.

The comment above is minimally helpful, so let me see if I can give you something substantive.

In this case, I don't think table layout is that bad of a thing. The data are "kind-of" tabular.
You'll have to widen your page, or shrink the input elements down to the minimum size possible.
Do you really need two sets of fieldsets?
Can you get away with a small font? Are the fields in a popup?

Fieldset does not support display: table / table-cell

Basically, the default rendering of fieldset can't actually be expressed in CSS. As a result, browsers have to implement it in non-CSS terms, and that interferes with application of CSS to the element.

Pretty much any element that can't be recreated using pure CSS will have issues of that sort.

Why does overflow hidden stop floating elements escaping their container?

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning
and clearing of floats apply only to things within the same block
formatting context. Floats do not affect the layout of things in other
block formatting contexts, and clear only clears past floats in the
same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Creating a layout of three fieldsets

The problem is that the border is also calculated into the width of the elements, so your elements are not exactly 50% but a little more.

You can fix this by using box-sizing css property set to border-box:

 box-sizing: border-box;

Read more about all possible box-sizing properties on w3schools. You also need to float the elements (css: float: left).

I also noted, that you are using two elements with the same ID. Only one element should have an id, so please change your selector to use class like this:

.inline {
  width: 50%;
  padding: 0;
  margin: 0;
  display: inline;
  box-sizing: border-box;
  float: left;
}

and in your HTML:

<fieldset class="inputAdd inline">

Why Do <Fieldset>S Clear Floats