Jump to content

Tip.it website developers - Possible solution for the fluid 3-column div layout tip.it wants!


Recommended Posts



I especially made an tip.it account to post this, and I'm not sure where I should post this but I thought suggestions would fit in this category.

I was checking out the source code for tip.it (wanted to take a look at JavaScript files on how combat calculation works) when my eye fell on this:





Solution for the 3-column div

I might have found a solution for this issue. You could try and build your content with the use of the Holy grail layout system which uses flexbox as it's foundation.

The Holy Grail Layout system is a solution for these problems:

  • Possibility to have a fluid center container with fixed-width sidebars.
  • The center column (main content) will appear first in the HTML source.
  • All columns should be the same height, regardless of which column is actually the tallest.
  • Requires minimal markup.
  • The footer should “stick” to the bottom of the page when content is sparse.

More info at: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/


Browser support:

You might wonder, what browsers support the use of flex? We are in luck, every modern browser supports flex, although some browsers require a fallback (internet explorer).

A list on every browser that supports flex you can find here: http://caniuse.com/#search=flex




Would be nice to see one more website that is table-free! Tell me what you think, and I hope this post reaches some of the tip.it admins.




Link to comment
Share on other sites

Curious: is the fix w3c compatible (will it validate)?


E: I am not a staff member. Just a curious board member. In case that's not clear >_>

I'm pretty sure it will validate, also you can find information about flex on w3c so it would be weird if you get validation errors. http://www.w3schools.com/css/css3_flexbox.asp

Link to comment
Share on other sites

  • 5 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

By using this site, you agree to our Terms of Use.