CODEWITHSUNDEEP
htmlcssfieldset
gulty
gulty

Reputation: 1076

Floating multi-line fieldsets

I have a fieldset markup with multiple fieldsets. Inside the container they are floating and create a form together. enter image description here

Without any 'hacks' my fieldsets are not floating because they are block elements and therefor are aligned below each other. Right now I'm using a negative margin to get my 2nd fieldset up next to the last element of fieldset 1. This is kinda hacky imo and is pretty annoying if you have several fieldsets and other forms which are a little bit different. Means I have to duplicate some css code and override it instead of having a fluidly floating form.

Is there any possibility to have the last element of fieldset 1 and the first item of fieldset 2 floating appropriately?

E: I created a small fiddle for the inline-block proposuals - not working for me in chrome: Fiddle

<fieldset>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</fieldset>
<fieldset>
  <input type="text" />
</fieldset>

fieldset {
  border: none;
  display: inline-block;
}
input {
  display: inline-block;
}

Upvotes: 0

Views: 1084

Answers (1)

chdltest
chdltest

Reputation: 873

Make sure fieldset1 and fieldset2's container is set as display: inline-block; and the fields themselves are also set as display: inline-block;

This will ensure that they aren't entirely blocks that will clear and set the other elements on to a new line.

Also, remove any floating since you can achieve what you want without floating. Floating will only complicate things at this point.

EDIT ------> Based on your jsfiddle, here is an updated one: http://jsfiddle.net/sty7gbnh/1/

There are margins/paddings around your fieldset. While you have set them as inline-blocks, you need to remove their initial margins/paddings still. For example, buildings (which would be fieldsets) with a margin of 5cm on each side will create a 10cm gap between each building... giving you that awkward space.

EDIT ------> Upon further inspection, I'm unsure as to how we can achieve this with just css and can only suggest using jquery:

fs = $("fieldset");
for (i = 0; i < fs.length; i++) {
    var that = $(fs[i]);
    var fieldsetContent = that.html();
    that.replaceWith(''+fieldsetContent+'');
};

The above code will replace all field sets with nothing (therefore removing fieldsets) and leaving just the input fields alone. This could be edited to target a specific area/container.

Upvotes: 1

Related Questions