I'm currently trying to design a page layout that includes three fieldsets. My goal is to have the first one span across 100% of the width, with the other two positioned side by side below it at 50% width each.
However, I am struggling to achieve this layout. I've set the widths of the two fieldsets to 50% and used display: inline-block;, but they are still being displayed on separate lines.
Here's my code:
ul {
list-style: none;
}
a {
text-decoration: none;
}
#inline {
width :50%;
padding : 0;
margin : 0;
display : inline;
}
input[type=submit]#loc{
margin-left: 75px;
display:inline-block;
}
td {
padding: 10px;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
.input input {
display: inline-block;
float: left;
}
.inputAdd input {
display: inline-block;
float: right;
}<div class="container">
<div class="main">
<fieldset class= "spanField">
<legend>Spanned Field</legend>
<form method="post" action="index.php" onsubmit="validation();">
<label>Input 1 </label>
<input type="text" size="20">
<label>Input 2 </label>
<input type="text" size="20">
<input type="submit" value="Add" />
<table style ="display:inline;">
<tr>
<td></td><td>Input</td><td>Input</td>
</tr>
<tr>
<td><button>X</button></td><td>Input 1</td><td>911 1</td>
</tr>
<tr>
<td><button>X</button></td><td>Input 2</td><td>911 2</td>
</tr>
</table>
</form>
</fieldset><br />
<fieldset id = "inline" class ="inputAdd">
<legend>Half field</legend>
<form method="post" action="index.php" onsubmit="validation();">
<table>
<tr>
<td></td><td>Input</td>
</tr>
<tr>
<td><button>X</button></td><td>Input 1</td>
</tr>
<tr>
<td><button>X</button></td><td>Input 2</td>
</tr>
</table>
<div style ="float:right;">
<select >
<option>Option 1</option>
</select>
<input type="submit" value="Add" />
</div>
</form>
</fieldset>
<fieldset id="inline" class ="input">
<legend>Half Field</legend>
<form method="post" action="index.php" onsubmit="validation();">
<label>Add input </label>
<input type="text" size="20">
<input type="submit" value="Add" />
</form>
<table>
<tr>
<td></td><td>Input</td>
</tr>
<tr>
<td><button>X</button></td><td>Input 1</td>
</tr>
</table>
</fieldset>
</form>