html - Responsive two column Footer

Question

I need a responsive two column footer. However, the thing doesnt turn out to be responsive.I've shown it in here. http://jsfiddle.net/fVBaB/ The CSS code is here...

 #leftf
{
width:46%;
display:block;
float:left;
margin-bottom:20px;
border: 1px solid grey;
padding:18px;
height:100px;
}

 #rightf
{
height:100px;
padding:18px;
width:46%;
display:block;
float:right;
margin-bottom:20px;
border: 1px solid grey;
}

 #bottomline
{
width:100%;
display:block;
bottom:0px;
}

Answer 1

这是因为您在宽度上的混合百分比和像素 - 您也在使用block而不是inline-block. 将您的 CSS 更改为：

#leftf
{
width:46%;
display:inline-block;
float:left;
margin-bottom:20px;
padding:2%;
height:100px;
}

#rightf
{
height:100px;
padding:2%;
width:46%;
display:inline-block;
float:right;
margin-bottom:20px;
}

#bottomline
{
width:100%;
display:block;
bottom:0px;
}

我还删除了边框#leftf，#rightf因为这是每个添加一个像素。这是一个演示http://jsfiddle.net/MY5VE/。

希望这可以帮助！