Getting 2 fieldsets adjacent (side by side) next to each other

Question

I need your help.

My idea is to have 2 fieldsets on the page that is 100% width of the page and adjacent to each other. Browser of choice is (IE10)

Right now, it does not seem that they comply with what i'd like them to do.

As it stands right now now, they are both still stacked up on top of each other.

How can I get the fieldsets nicely side by side?

Here's a quick pic of what is happening: enter image description here

Here is the markup:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type='text/css'>
fieldset {
  padding: 3px;
  width: 300px;
  float: left;
}
#field1 {
    width: 70%;
}
#field2 {
    width: 30%;
}
label {
  float:left;
  font-weight:bold;
}
input {
    width: 100%;
    box-sizing:border-box;
}
</style>

</head>
<body>
    <fieldset id="field1">
        <legend>Message Centre</legend>
        <input type="text">
    </fieldset>
    <fieldset id="field2">
        <legend>File Number</legend>
        <input type="text">
    </fieldset>

</body>

</html>

See this post, it's a fairly similar problem: http://stackoverflow.com/questions/22696467/form-with-two-columns/22696576#22696576 — Pete, Apr 04 '14 at 17:13

Ploppy · Answer 1 · 2014-04-04T17:32:29.793

4

Yep, i did almost the same :p

box-sizing is the solution !

fieldset : http://jsfiddle.net/8dSnw/5/

input{
    float: left;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
}

Only input :

http://jsfiddle.net/8dSnw/3/

edited Apr 04 '14 at 17:32

answered Apr 04 '14 at 17:24

Ploppy

14,810
6
41
58

score 3 · Answer 2 · answered Sep 04 '14 at 14:14

3

Insert two fieldsets into one table:

<table> <td> Fieldset1 </td> <td> Fieldset2 </td></table>.

answered Sep 04 '14 at 14:14

Mohammad Mujahid

31
2

2

You should also be encapsulating the two ``s in a `` – RevanProdigalKnight Sep 04 '14 at 14:22

score 2 · Accepted Answer · answered Apr 04 '14 at 17:19

You are very close.

Border-box is your friend and there is some default browser styling that is getting in your way. I added border-box to the fieldset as well as the input. Because you had padding and there was some default margins and borders on your fieldsets, the percentages ended up being larger than 100%. Removing the default margin and adding border-box to the fieldset addresses these issues:

fieldset, input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
fieldset {
    margin:0;
}

http://jsfiddle.net/U46V7/

Border-box changes the width attribute to include padding and borders in it's width calculation. So where as before #field1 was set to 70% width + 3px of padding on the left and right + 1px border on the left and right, by adding box-sizing:border-box; the 70% width you set includes the border and padding.

score 0 · Answer 4 · edited Jan 03 '22 at 05:22

here's a code I have made and it worked.

enter code here<body>
    <style>
            #f1{
                    width: 80%;
            }
            #f2{
                    width: 90%;
            }
    </style>
    </style>
    
            
    <fieldset>
            <legend>Personal Details</legend>
            <table>
                    <tr>
                            <td>
                                    <fieldset id="f1">
                                            <legend>Address Details</legend>
                                            <label for="city">City :</label>
                                            <input type="text" id="city"> <br> <br>
                                            <label for="zip">Zip Code : </label>
                                            <input type="number" id="zip"  size="">
                                    </fieldset>
                                    
                            </td>
                            <td>
                                    <fieldset id="f2">
                                            <legend>Telephone Details</legend>
                                            <label for="home">Home :</label>
                                            <input type="number" id="home"> <br> <br>
                                            <label for="cell">Cell :</label>
                                            <input type="number" id="cell"> <br> <br>
                                    </fieldset>
                            </td>
                    </tr>
            </table> 
    </fieldset>

Getting 2 fieldsets adjacent (side by side) next to each other

4 Answers4