In-line block how to make each block same height on browser resize

[Handler]

Hello!

 

test page : http://ftscv31.handlersspot.net/_index.php

 

Under the 'field status' part of the page I'm trying to figure out how to get the blocks to stay the same height when the browser is resized. I've tried auto and I've tried a fixed pixel height which makes everything a bit wonky.

 

This will be me one thing learned for today! If not the first new thing learned for today!

 

Thanks for your help!

 

Dave

[Ingolme]

The first issue is that you forgot closing <p> tags here:

<div class="w3-container w3-rightbar w3-leftbar w3-border-green w3-pale-green w3-text-green w3-show-inline-block" style="width:19%!important;">
 <p>Tiny Twisters<p> <!-- Has <p> instead of </p> -->
</div>

That's messing up the layout. You have to fix this first.

 

After that's done, my suggestion is to give all these elements a fixed height of 60px and set the vertical-align to "middle". It will work as long as you fix the </p> tag issue.

 

The alternative solution is to set the white-space property to nowrap so that the text never wraps, therefore keeping the box always the same height.

[dsonesuk]

Use display; flex;

 

wrap coloured boxes only with a div with class 'flexbox'

 

<div class="flexbox">

....coloured boxes

 

</div>

 

and then use

 

.flexbox {
display: flex;
flex-wrap: wrap;
}

 

with

 

.flexbox > div {
flex: 1 0 20%;
}

 

The height will be the same for all with width 20%

[Handler]

@Ingolme you have to excuse me I was a very bad boy not validating my code before I posted my problem. I should know better! Probably would have figured it out on my own had I. But that did trick! =))

 

@dsonesuk I have to play with flexbox one of these days. I started reading about it this past week and it looks really neat. Just would have to think of all the things I could use it for first!

 

Thank you both for your help!

 

*** Moral of this post: validate your code before you yell the building is on fire! o.<

Edited May 15, 2016 by Handler