Fieldset tag and CSS Columns

Hey Everyone,
I’m looking for some clarity on this topic after spending the last couple of hours scouring the internet for a reasonable solution.

I’m working on the FCC Survey Project, I chose to do a survey for an actor’s headshot, based on another course I’ve been going through. This survey requires willing participants to look at a headshot and go through a list of adjectives that might describe the actor. The participant then checks all the adjectives they think describe the actor based on the photo.

This list is long, over 250 adjectives. I want to put these adjectives into four columns using the CSS columns property. I tried it out, and it worked great. Until I realized I didn’t have my checkboxes set in a fieldset tag. I decided to add the fieldset and legend tags for accessibility reasons.

But once I added the fieldset and legend tags, I couldn’t get the columns property to work.

I tried nesting a div tag, with the columns set in a class tag, around the fieldset tag. It didn’t work.

I put the div inside the fieldset tag, still didn’t work.

Most of the info and tutorials I found about this issue are several years old.

Best advice seemed to say use a table which I don’t want to do.

w3cschools says a fieldset tag is supposed to work with all Global HTML tags, including style. And, I know columns works with other class tags.

Am I missing something here?
Or is it super difficult to use columns in a fieldset tag?

I also realize none of this is necessary to pass the FCC Survey Challenge, but I am creating this survey for my own use, so either way, I need to figure it out. :slight_smile:

Hi @chandraryder :grinning:

Have you tried the ‘flexbox’ layout ?
Inside you ‘fieldset’ and directly after ‘legend’, put a ‘div’ container and inside it four ‘div’ with your checkboxes.
A ‘display: flex’ on the container will make the affair.

CSS grid might be a good option too

Flexbox achieved the desired result. I did not try the CSS grid option simply because the flexbox option worked and was easy to implement.

Thanks so much!