Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Featured Replies

Hello,

 

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:

 

e1o2DdY.png

 

 

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.

 

 

 

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 >_>

hzvjpwS.gif

  • Author

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

  • 5 months later...
  • Author

Bumping this thread as it might be useful for the developers

Create an account or sign in to comment

Important Information

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

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.