如何用div标签在三列之间划分空间？

Question

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,

Answer 1

我目前无法测试，但我猜想是您在div上设置了填充或边距，这会使三个部分的总宽度大于100％。

Answer 2

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 :)