Equal height columns using flexbox

toolman · November 4, 2018, 7:41pm

Hi,

I am trying to create 3 equal height columns using flex-box, but what I have doesn’t seem to be working.

Can anyone see what I have wrong?

<div class="row">
	<div class="col-md-4 col-sm-12 col-xs-12 page-body-left blue white-border-right"></div>
	<div class="col-md-8 page-body-right body-copy blue">
		<div class="row practitioners" >
			<div class="col-md-12 pad-x-0">
				<div class="row" style=" display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;">
					<div class="col-md-4" style="flex: 1;">
						<div class="mid-grey practitioner" >
							<div class="text-center">text 1</div>
						</div>
						<div class="col-md-4" style="flex: 1;">
							<div class="mid-grey practitioner"  >
								<div class="text-center">text 2</div>
							</div>
							<div class="col-md-4" style="flex: 1;">
								<div class="mid-grey practitioner"  >
									<div class="text-center">text 3</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

coothead · November 4, 2018, 8:58pm

Hi there toolman,

this is a basic example - ( without code bloat ).

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container {
    display: flex;
    padding: 0.5em 0.25em;
    border: 1px solid #999;
    background-color: #fff;
 }

#container > div {
    flex: 1;
    padding: 1em;
    margin: 0 0.25em;
    border: 1px solid #999;
    background-color: #eef;
    text-align: center;
 }
</style>

</head>
<body> 

 <div id="container">

  <div>text 1</div>

  <div>text 2</div>

  <div>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Curabitur sit amet sem sed libero bibendum tempus faucibus       
    quis mi. Nulla rhoncus vel ipsum in volutpat.
   </p>
  </div>

<!-- #container --></div>

</body>
</html>

coothead

PaulOB · November 4, 2018, 9:50pm

You have three missing closing divs for col-md-4.

e.g.It should be like this:

<div class="row">
  <div class="col-md-4 col-sm-12 col-xs-12 page-body-left blue white-border-right"></div>
  <div class="col-md-8 page-body-right body-copy blue">
    <div class="row practitioners" >
      <div class="col-md-12 pad-x-0">
        <div class="row" style=" display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;">
          <div class="col-md-4" style="flex: 1;">
            <div class="mid-grey practitioner" >
              <div class="text-center">text 1</div>
            </div>
          </div>
          <div class="col-md-4" style="flex: 1;">
            <div class="mid-grey practitioner"  >
              <div class="text-center">text 2</div>
            </div>
          </div>
          <div class="col-md-4" style="flex: 1;">
            <div class="mid-grey practitioner"  >
              <div class="text-center">text 3</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you are using bootstrap4 then it uses flexbox by default I believe so no need to add the styles inline (which you shouldn’t do anyway).

See the example from @coothead to see how simple something like this really is

coothead · November 4, 2018, 10:01pm

< offtopic >

I don’t want to start a discussion about “BootStrap”, but just
want to point out that one of it’s problems is, that it often
makes it rather difficult to “see the wood for the trees”

coothead

< /offtopic >

toolman · November 4, 2018, 10:18pm

Hi,

Thanks for the replies.

I have closed the unclosed tags, but they still don’t seem to be the same heights.

BTW, I am using Bootstrap 3

PaulOB · November 5, 2018, 2:34pm

I just pasted the code into bootstrap3 and the columns are equal heights.

You will have to send a link to your own page so we can see what’s going on or if you have other issues. I’m guessing that perhaps you are trying to add a background colour to inner elements and expecting them to fill the parent automatically.

donboe · November 5, 2018, 5:00pm

< offtopic >
Is that Bootstrap related? Or is it just forgetting to add closing divs (as explaind by Paul OB) which could have happend without using Bootstrap as well
< /offtopic >

system · February 5, 2019, 12:00am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.