CODEWITHSUNDEEP
css
qwerzxcxyz
qwerzxcxyz

Reputation: 199

How can I align its border height automatically this 2 fieldset using css?

How can I align its border height automatically this 2 fieldset using css?

  /*Fieldset and Legend*/
    .the-legend {
        font-size: .9vw;
        font-weight: 600;
        line-height: 10px;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }

    .the-fieldset {
        border: 1px solid silver;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 15px;
     }

pls help me out here. and thanks

UPDATE

enter image description here

Above code a the structure of my code. I divide my fieldset per row.

Upvotes: 1

Views: 362

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

You can use tabular display (unrelated to tabular - HTML - structure which is the way to go with tabular data and the way NOT to go otherwise).
Cells have the niiiice property of being of same height (and sticking on the same line/row whatever you try)

As you posted your code as an image, a minimal example (compatibility IE8+):

.col-lg-12 {
  display: table;
  table-layout: fixed; /* the other tabular algorithm */
  width: 100%;
}
.col-lg-6 {
  display: table-cell;
  width: 50%
}
/* Managing gutter between fieldset. No margin, only padding, on cells so we use inner elements */
.col-lg-6:first-child .the-fieldset {
  margin-right: 2rem;
}
.col-lg-6:last-child .the-fieldset {
  margin-left: 2rem;
}

EDIT: .col-lg-6 will have same height but still not fieldset (add outline: 1px dotted someColor to both and you'll see it). You thus need to add height: 100% to both container (cells), the element with a border (fieldset) and all elements in-between (none here). Or remove border from fieldset and add it to .col-lg-6; it doesn't change semantics or accessibility and has the same visual result

EDIT2: Flexbox is another way of managing vertical heights quite easily. Compatibility is IE10+ (and easy to achieve and maintain if you use Autoprefixer, otherwise meh)

Upvotes: 1

Dilshan Perera
Dilshan Perera

Reputation: 132

You can put them in a parent container like a table or div, and have the two children be at

 height=100%.

Upvotes: 1

Related Questions