Set fieldset side by side

Here is a little example I created on jsFiddle: Side by Side Fieldset

The idea is you can 'float: left' the fieldset with a 'width: 50%', using 'padding: 0' and 'margin: 0' AND (the important one) 'box-sizing: border-box', it will allow them to sit side by side.

Here is the code.....
HTML:

<form>
    <fieldset>
        <legend>Title 1</legend>
        <ul>
            <li>
                <label>Item 1</label>
                <input type="text" id="text1" />
            </li>
            <li>
                <label>Item 2</label>
                <input type="text" id="text2" />
            </li>
            <li>
                <label>Item 3</label>
                <input type="text" id="text3" />
            </li>
        </ul>
    </fieldset>
    
    <fieldset>
        <legend>Title 2</legend>
        <ul>
            <li>
                <label>Item 4</label>
                <input type="text" id="text4" />
            </li>
            <li>
                <label>Item 5</label>
                <input type="text" id="text5" />
            </li>
            <li>
                <label>Item 6</label>
                <input type="text" id="text6" />
            </li>
        </ul>
    </fieldset>
</form>

Select allOpen in new window

CSS:

ul{
    list-style-type: none;
}

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

Select allOpen in new window

Hi SoupBoy,

I try to use it as follows but it failed :

        <div id="contact">
            <fieldset>   
                <legend>Porteur projet</legend> 
                <input id="titreSite1" name="titreSite1" type="text" value="Chef etablissement">
                <br />
                <label for="civiliteSite1">Civilité</label>
                <input id="civiliteSite1" name="civiliteSite1" type="text" value="Monsieur">
                <input id="nomSite1" name="nomSite1" type="text" value="COSTE">
                <input id="prenomSite1" name="prenomSite1" type="text" value="Patrick">
                <br />
                <label for="telSite1">Téléphone</label>
                <input id="telSite1" name="telSite1" type="tel" value="0534098230">
                <label for="mobileSite1">Mobile</label>
                <input id="mobileSite1" name="mobileSite1" type="tel" value="">
                <br />
                <label for="mailSite1">Courriel</label>
                <input id="mailSite1" name="mailSite1" type="email" value="0090002D@ac-toulouse.fr">
            </fieldset>
            <fieldset>   
                <legend>Porteur projet 2</legend> 
                <input id="titreSite1" name="titreSite1" type="text" value="Chef etablissement">
                <br />
                <label for="civiliteSite1">Civilité</label>
                <input id="civiliteSite1" name="civiliteSite1" type="text" value="Monsieur">
                <input id="nomSite1" name="nomSite1" type="text" value="COSTE">
                <input id="prenomSite1" name="prenomSite1" type="text" value="Patrick">
                <br />
                <label for="telSite1">Téléphone</label>
                <input id="telSite1" name="telSite1" type="tel" value="0534098230">
                <label for="mobileSite1">Mobile</label>
                <input id="mobileSite1" name="mobileSite1" type="tel" value="">
                <br />
                <label for="mailSite1">Courriel</label>
                <input id="mailSite1" name="mailSite1" type="email" value="0090002D@ac-toulouse.fr">
            </fieldset>
        </div>
  

Select allOpen in new window

with the following CSS code :

#contact fieldset{
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Select allOpen in new window

You must have other CSS rules affecting it...  I put your HTML and CSS here and it works as expected...

Can you post a link to your page and we can take a look at it in chrome devtools?

This is the link : http://pouxdagouti.org/aster/seeEltsAdm.php

Nothing else seems as if it would affect it...though I didn't see the new code added.  I think the issue is probably a browser issues and the box-sizing rule.

What browser are you using?

Try using this css:

#contact fieldset{
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Select allOpen in new window

Attached is a screen shot showing the modifications made within Chrome's Dev Tools. Notice the contact fieldsets are side by side...
contactSideBySide.PNG

I use Chrome.

I added the div id="contact" in the HTML file and the definition associated in the CSS file.

I will check one more time tomorrow.

Thanks a lot for your help.

In the link you provided, I do not see the new CSS rules....  can you send me an updated link with the new CSS rules in place?  Then I can take a look as to why it isn't working.

Hi soupBoy,

I have updated everything.
I can see the new rules but it still failed.

can you send me a new link?  I checked the rules for those elements and I don't see the changes....

Without seeing more of your code (or a link) I wouldn't know what to tell you....

Hi soupBoy,

At the link : http://pouxdagouti.org/aster/seeEltsAdm.php

Everything is updated.

The code is the one showed above and the last version of the CSS file as the last update as follows :

#contact fieldset{
    float: left;
    width: 50%;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Select allOpen in new window

I think I did everything you advice me to do.

So I don't understand why it failed so far.

Hi,

All the other rules are applied correctly.
I will try your solution by putting the rules in a style section directly in the HTML code.

Very helpful assistance.
soupBoy really helped to find the accurate solution, even in this tricky situation.

Hi soupBoy,

When I put the <style> directly in the code, it works.