Pavel Z. Pavel Z. - 5 months ago 29
CSS Question

Align elements inside fieldset

I tried different options in order to align elements inside a fieldset in order to keep both title, text and Learn More button on the same lines using different approaches. But the result was still negative:
Align result

This is my code:



fieldset {
height: 100%;
}
fieldset.scheduler-border {
border: 2px solid #efefef !important;
border-radius: 5px;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}

legend.scheduler-border {
font-size: 0.7em !important;
font-weight: bold !important;
text-align: center !important;
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
vertical-align: sub;

}
.btn-devices{
text-transform: none;
background-color: #e64232;
color: white;
}

<div class="col-md-4">
<fieldset class="scheduler-border">
<legend class="scheduler-border red">DEVICES</legend>
<h3>ALL DEVICES SUPORTED</h3>
<p class="desc-features">All our products are perfectly optimized for mobile, desktop and tablet.</p>
<button type="button" class="btn btn-danger btn-devices">Learn More</button>
</fieldset>
</div>





I would appreciate any possible suggestions, cause I did not find any help in information concerning this topic.

Answer

As Paulie_D mentioned in the comment, there is no method for this but if suitable for you to define min-height then you can do the trick. Add min-height:100px for your description.

See fiddle: http://jsfiddle.net/txdbsmdh/2/

Comments