I have created three columns like this:
<div style="float: left">Left Column</div>
<div style="float: left">Middle Column</div>
<div style="float: left">Right Column</div>
This works well on its own. However the moment I add it to my Wordpress page template, by defining a left and right column around the existing main column something unexpected happens:
http://venuscloud.com/crm-software/
The left column is correctly placed and the middle column is as expected in the middle but the right column is at the bottom. I don't understand why the remaining space is not divided between the three columns as expected.
Any comments?
Many Thanks,
The problem with your divs are. The right and left divs have css floats. But your middle div doesn'r have that attributes. Its keep on middle with margin-attributes. Even giving float to middle div won't help you. Because then you have to make the op divs correct.
One method you can do is, change your divs order like :
<div id="left_column"></div>
<div id="right_column"></div>
<div class="col-full"></div>
then add float:right to your right-column div.
Hope this helps you :)
I can't test it right now but my guess is you have padding or margins set on the divs, which makes the total width >100% for the three of them combined.