Front Page Layout Messes Up Sometimes For Some Reason

On my homepage of my site http://www.webphenoms.com, I created a section called "Custom Marketing For Any Business" (it's a Bottom II Widget, centered). In this section, I made 2 rows of 3 columns. My problem is that sometimes, the when I load the page, the bottom row is off, instead of having 3 columns, they are skewed and the layout is completely messed up. It completely messes up my site's first impression. This happens about 1/3 of the time.

I've attached images of what is happening

Screen Shot 2013-07-17 at 3.29.27 PM.png

and what it should look like.

Screen Shot 2013-07-17 at 4.16.47 PM.png

The html looks like this

Code: Select all

<div id="packagescontent">

<section id="unveiled">
<div class="grid3col">
<div class="column first">
text and images.....
</div>
<div class="column middle">
text and images...
</div>
<div class="column last">
text and images...
</div>
</div>
</section>

/* that's for the first row. The second row is exactly the same, still within the "packagescontent" division. */

<section id="unveiled">
<div class="grid3col">
<div class="column first">
text and images.....
</div>
<div class="column middle">
text and images...
</div>
<div class="column last">
text and images...
</div>
</div>
</section>

</div>


And here's the CSS for those tags

Code: Select all

#packagescontent {
width:930px;
margin-left: auto;
margin-right: auto;
}

.grid3col {
margin-top: 40px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
width: 100%;
display: block;
clear: both;
}

#unveiled .column {
width: 266px;
margin-left: 40px;
float: left;
}

.column.first {
margin-left: 0 !important;
width: 266px;
margin-bottom: 50px;
}


How can I fix this problem?? It only happens sometimes, so I think maybe its on the theme's end?? Please help!? Thanks.

Is this problem browser independent?

I'm pretty sure it happens only in Chrome. I only use Chrome so I might be wrong about it not happening in other browsers, but Chrome is usually slower to update my site with other plugins and normal content updates... pretty sure this only happens there.

I was trying to reproduce Your problem, but it doesnt show.
The only thing that comes to my mind is a problem with floats, so You could try one of two things:
1. Force default minimal height of column elements:

Code: Select all

#unveiled .column {min-height: 370px;}


This might be a little to much, but it needs to be little longer, than longest column height, or:
2. The problem with two elements having same ID:

Code: Select all

<section id="unveiled">


You should use class instead (there can be only one element with given ID on a page), and then You could force clear floats of that element children:

Code: Select all

.unveiled {overflow: hidden}


I tried this, seems to be ok so far. Thanks for your help.