Three Column Css Layout

I looked at a few other questions before posting this one. Nothing else does quite what I want. My goal is to create a three column layout but with a 'tout' hanging down from the

Solution 1:

I have updated your fiddle: http://jsfiddle.net/Znz2P/10/

on the left and right floated divs:

width: calc(50% - 128px);

the right and left divs will share the remaining space, minus the set width of the center (divided by 2)

on the logo:

.logo { clear: left; }

and collapse the borders:

.topcontain > div {     
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

I aslo added a 'clearfix' class, which is nice to have for containers that only sport floated elements.

Solution 2:

Its because the center div has fixed width while the left and right have 35% width. You can either remove the width from the "topright" div or set max-width:30% on the "topcenter" class