NealR
Reputation: 10689
Evenly space three buttons inside a fieldset
So I just want to even space out three buttons along the bottom and not having any luck... Can anyone help with the CSS?
Here's a working fiddle: http://jsfiddle.net/Am8vc/
I would all three buttons to be below the lowest input field and evenly spaced between the left and right borders of the fieldset. So far the best I can do is get them to display inline...
HTML
<form action="/" id="formElem1" method="post" name="formElem"> <fieldset class="step">
<legend>Search</legend>
<table class="inlineTable">
<tr>
<td>
<div class="editor-label">
<label for="OriginalStatNum">Life Master</label>
</div>
<div class="editor-field">
<input class="AlphaNumOnly" id="OriginalStatNum" maxlength="10" name="OriginalStatNum" style="width:80px;" type="text" value="" />
</div>
</td>
<td>
<div class="editor-label">
<label for="ReportsToStat">Reports to Stat</label>
</div>
<div class="editor-field">
<input class="AlphaNumOnly" id="ReportsToStat" maxlength="1" name="ReportsToStat" style="width:80px;" type="text" value="" />
</div>
</td>
<td>
<div class="editor-label">
<label for="OriginalMarketSegment">Market Segment</label>
</div>
<div class="editor-field">
<input class="AlphaNumOnly" id="OriginalMarketSegment" maxlength="3" name="OriginalMarketSegment" style="width:80px;" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<label for="Pensgc">PENSGC</label>
</div>
<div class="editor-field">
<input class="AlphaNumOnly" id="Pensgc" maxlength="3" name="Pensgc" style="width:80px;" type="text" value="" />
</div>
</td>
<td colspan="2">
<div class="editor-label">
<label for="OriginalName">Name (If No Life Master)</label>
</div>
<div class="editor-label" style="margin-top: 5px;">
<input class="AlphaNumOnly" id="OriginalName" maxlength="255" name="OriginalName" style="width:160px;" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="editor-label">
<label for="OriginalEffectiveDate">Effective Date</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-date="The field Effective Date must be a date." id="OriginalEffectiveDate" name="OriginalEffectiveDate" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="editor-label">
<label for="OriginalCancelDate">Cancel Date</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-date="The field Cancel Date must be a date." id="OriginalCancelDate" name="OriginalCancelDate" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="editor-label">
<label for="ExceptionName">Exception List</label>
</div>
<div class="editor-field">
<select id="ExceptionName" name="ExceptionName"><option value=""> </option>
<option value="C">Starting with C</option>
<option value="D">Starting with D</option>
<option value="T">LStarting with T</option>
<option value="A">Starting with A</option>
<option value="N">Starting with N</option>
<option value="X">WHATEVER</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="editor-label">
<label for="LastUpdateId">Last Update By</label>
</div>
<div class="editor-field">
<input id="LastUpdateId" name="LastUpdateId" readonly="readonly" style="width: 80px;" type="text" value="" />
</div>
</td>
</tr>
</table>
<table class="inlineTable" style="margin-right: 0px;">
<tr>
<td colspan="3">
<div class="editor-label">
<label for="AgencyName">Agency Name</label>
</div>
<div class="editor-field">
<input class="noInput" id="AgencyName" name="AgencyName" readonly="readonly" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<label for="CompanyCode">Company Code</label>
</div>
<div class="editor-field">
<input id="CompanyCode" name="CompanyCode" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
<td>
<div class="editor-label">
<label for="SecSellerCd">SEC Seller Code</label>
</div>
<div class="editor-field">
<input id="SecSellerCd" name="SecSellerCd" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<label for="DssMrktSeg">Market Segment</label>
</div>
<div class="editor-field">
<input id="DssMrktSeg" name="DssMrktSeg" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
<td>
<div class="editor-label">
<label for="LifeAnn">Life/Annuity</label>
</div>
<div class="editor-field">
<input id="LifeAnn" name="LifeAnn" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<label for="ConnCode">Contract Code</label>
</div>
<div class="editor-field">
<input id="ConnCode" name="ConnCode" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
<td>
<div class="editor-label">
<label for="CancelRsn" readonly="readonly" style="width:80px;">Cancel RSN</label>
</div>
<div class="editor-field">
<input id="CancelRsn" name="CancelRsn" readonly="readonly" style="width:80px;" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="editor-label">
<label for="ReportsToAgn">Reports to Agency</label>
</div>
<div class="editor-field">
<input id="ReportsToAgn" name="ReportsToAgn" readonly="readonly" type="text" value="" />
</div>
</td>
</tr>
</table>
<span class="ButtonContainer">
<button type="submit" class="submitButton" >Search</button>
<button type="submit" class="submitButton" >Save</button>
<button class="clearButton" id="ClearSearch">Clear</button>
</span>
</fieldset>
</form>
CSS
*{
margin:0px;
padding:0px;
}
html {
background-image: url("/Images/Swiftnet-Background.jpg");
margin: 0;
padding: 0;
}
body{
color:#444444;
font-size:13px;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
position:absolute;
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -350px;
width:704px;
height:100%;
text-align:center;
}
#wrapper{
border:2px solid #fff;
background-color:#f9f9f9;
width:700px;
overflow:hidden;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#steps{
width:700px;
overflow:hidden;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.step{
float:left;
width:700px;
}
#navigation{
height:45px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
margin:0px 2px;
padding-left: 25px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
span.checked{
background:transparent url(../images/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background:transparent url(../images/error.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:700px;
padding:5px 0px 5px 10px;
margin: 10px 0px 20px -20px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background-color:#f4f4f4;
border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#steps form p.submit{
background:none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
/*display: inline;*/
cursor:pointer;
margin: 0px auto;
clear:both;
margin-top:100px;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}
#steps form button:hover {
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#steps form input[readonly="readonly"]{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:whitesmoke;
}
#ButtonContainer {
display: inline;
margin-top: 100px;
}
/*.button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding-top: 50px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#4797ED;
}*/
/* TABLES */
.inlineTable {
float: left;
margin-left: 20px;
margin-right: 20px;
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
/* FORMS */
.display-label,
.editor-label {
margin: 1em 0 0 0;
font-size: 13px;
text-align: left;
}
.editor-box-label
{
padding-top: 8px;
padding-bottom: 5px;
font-weight: bold;
font-size: 8px;
color: #696969;
}
.display-field,
.editor-field {
margin: 0.5em 0 0 0;
color: Black;
font-size: 8px;
}
Upvotes: 1
Views: 3293
Answers (3)
Marc Audet
Reputation: 46785
Try the following addition to your CSS:
.ButtonContainer {
display: block;
width: 100%;
overflow: auto;
text-align: justify;
line-height: 0;
vertical-align: top;
padding: 10px 0; /* adjust as needed */
}
.ButtonContainer button {
margin: 0 10px; /* adjust as needed */
}
.ButtonContainer:after {
content: '';
display: inline-block;
vertical-align: top;
width: 100%;
line-height: 1.5;
}
See demo at: http://jsfiddle.net/audetwebdesign/2xXCD/
Turn the .ButtonContainer element into a block level element with 100% width and set overflow: auto (or clear: both) to clear the floated inline tables.
Use text-align: justify to get the evenly spaced buttons.
However, this only works if there are more than two rows in the container, so use a pseudo-element to generate an empty 100% wide inline-block of zero height.
Tweak the margin and padding as needed to get the correct white space balance.
Works in most modern browsers.
In Firefox, it looks like:
Upvotes: 1
Rook
Reputation: 391
Add this to your CSS, also change your #ButtonContainer to .ButtonContainer
CSS
.ButtonContainer button{
width:32%;
}
now put the ButtonContainer in another table row
HTML
<tr>
<td colspan="2" class="ButtonContainer">
<button type="submit" class="submitButton" >Search</button>
<button type="submit" class="submitButton" >Save</button>
<button class="clearButton" id="ClearSearch">Clear</button>
</td>
</tr>
Here is the example
Upvotes: 1
jonsuh
Reputation: 2875
A few issues with your HTML and CSS.
Your CSS references #steps when there is no element with id steps. Your form is id formElem1. Replace #steps form or #steps with #formElem1 in your CSS.
JSFiddle: DEMO
Without fixing your CSS, this is a hack but it works. I recommend you adjusting your CSS and HTML accordingly
HTML
<span class="ButtonContainer">
<button type="submit" class="submitButton submitButton--1" >Search</button>
<button type="submit" class="submitButton submitButton--2" >Save</button>
<button class="clearButton" id="ClearSearch">Clear</button>
</span>
CSS
.submitButton,
.clearButton {
margin-top: 75px;
margin-bottom: 25px;
position: relative;
}
.submitButton--1 {
left: -403px;
margin-left: 20px;
}
.submitButton--2 {
left: -125px;
}
.clearButton {
left: 150px;
}
JSFiddle: DEMO (Unelegant solution)
Upvotes: 1
Related Questions
- Match fieldset width with button width
- Positioning buttons in a 3 column manner
- How to align buttons side by side in groups of three, best way?
- How do I align and space out these buttons?
- Uneven spacing between every other button
- IS it easily possible to place fieldset elements so that the input fields begin at the same horizontal space?
- How to horizontally align fieldset elements?
- Align input elements inside two fieldsets
- lining up fieldset tags horizontally in css3
- How can I reduce space between elements in a fieldset