Board Thread:Support Requests - Getting Technical/@comment-1807002-20150930004852/@comment-4731443-20150930070730

Moving from tables to divs is definitely a process, but once you really understand how floating and positioning works it really makes a lot more sense in a lot of applications. Distinguishing content from appearance also becomes extremely useful when you're updating things or using standard classes and templates. So it's worth it in the end :)

The 3D view in Firefox's developer tools also helps visualize the different layers of divs and where everything begins and ends.

Hollowness wrote: @SethFu Is it possible to have the same type of (click anywhere on the bar) on the first example instead of the expand link? And sorry did I miss how to not have the centered title text not shift when expanded/collapsed?
 * 1) Absolutely. I've added the id and class to the first one so you can see where they go on a table. Just make sure to always have a unique id for each container and change the corresponding class accordingly.
 * 2) That is due to the length of the [Hide] and [Show] strings. If they took exactly the same space, there would be no such movement; if the difference were bigger, the sliding would be more noticeable. If your title were left-aligned, it wouldn't make a difference, but for centered text the changing text changes the available width of the element and the center point moves accordingly. I can't think of a way to avoid that other than using the same text for both actions, or using a remote toggle link as in the third example.