Handler Posted May 14, 2016 Share Posted May 14, 2016 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 Link to comment Share on other sites More sharing options...
Ingolme Posted May 14, 2016 Share Posted May 14, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2016 Share Posted May 14, 2016 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% Link to comment Share on other sites More sharing options...
Handler Posted May 15, 2016 Author Share Posted May 15, 2016 (edited) @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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now