Part of the biggest issues as content writers we face is how to layout content on other platforms for example RealGeaks, Sierra Interactive, Point 2, and others that have their own WYSIWYG editors, commonly strip out code or style edits upon save. This not only is sometimes hard to work with and can be frustrating at times but over all it helps provide the site owner a more consistent look and feel. I have spend countless hours redoing pages of a site just because the site owner thought it would be a good idea to copy and paste from Microsoft Word, which ads a bunch of extra code to their pages (great for print.. bad for web).
This is what we have come up with for our clients that use one of the solutions above or for anyone facing the same issues. For ease of use just know that you need to replace everything between the three *** including deleting the three ***
Here is the source code:
<h1 style="text-align: center;">***Title before columns***</h1> <div style="clear: both; display: table; width: 100%;"> <div style="float: left; width: 50%; padding-right: 5px;"> <h2 style="text-align: center;">***Title left column***</h2> </div> <div style="float: left; width: 50%;"> <h2 style="text-align: center;">***Title right column***</h2> </div> <div style="float: left; width: 50%; padding-right: 5px;">***NEW Left column***</div> <div style="float: left; width: 50%;">***NEW right column***</div> </div>
Here is our YouTube video so you can see it in action: