I've set up a new Page Layout page to replace the Home.aspx of a standard Enterprise Wiki page.
Trying to be a good fellow (and not kill any puppies) I opted to go for div's to achieve my goals instead of tables. My setup is quite plain; two columns dividing the screen approx 60/40 between them, with a blog-like news list on the left and some webpart zones with links etc on the right, preferably floating nicely as the screen size is changed. I did something like this:
<div class="FrontPage"> <div class="LeftCol">News list stuff here</div> <div class="RightCol"> <div class="Section"> <div class="IconGfx"><img src="url"></div>Web part zone 1</div> <div class="Section"> <div class="IconGfx"><img src="url"></div>Web part zone 2</div> </div> </div> </div>
Well, it's more, but hopefully you get the basic idea. I then styled the classes LeftCol and RightCol with display: inline-block to make them appear side by side, instead of stacked. It works as long as the screen is large enough, but if I shrink the window, the RightCol pops down beneath the LeftCol one.
If I risk a few puppies and do it with a table, I have no such problems. What am I doing wrong on the div styling?
Thanks for all your help!