Currently in the process of creating a 3-column website template and have been rearranging the divs to improve SEO. The issue I am facing is that the layout looks terrible when it's not fully loaded.
Here is how it appears when it's not fully loaded: https://i.sstatic.net/rSaMh.png
Once it's 100% loaded, it looks like this: https://i.sstatic.net/smclN.png
Would it be possible to keep the div positions fixed?
HTML:
<div id="wrapper">
<div id="content-wrapper">
<div id="content">I'm first</div>
<div id="side_a">I'm second</div>
</div>
<div id="side_b">I'm third</div>
</div>
CSS:
#wrapper {width: 800px;margin: 0 auto;}
#content-wrapper{float: left;}
#content {width: 400px;float: right;}
#side_a {width: 200px;float: left;}
#side_b {float: left;width: 200px;}
View the overview here: http://jsfiddle.net/avzLK/