2列右窄左宽、高度自适应+头部+导航+尾部——www.poluoluo.com


  此例子是非常实用的一个例子,大家可能注意到了,在header、menu、mainContent容器下都加上了<br class="clearfloat" />这句话,当然也可以用div。

  这句话是清除浮动用的,因为我们在header和menu内设计时都可能涉及到浮动,还有sidebar栏和content,本身已经浮动了,这样如果content的高度没有sidebar高时,footer也会浮动到sidebar右侧,造成整个页面错乱,采用这种方式可以有效避免错乱。

  另外,sidebar和content分别采用左浮动和右浮动的方式,可有效避免IE6的3像素bug。当然也可以采用自适应宽度时 margin-left:205px !important; margin-left:202px;这种方法来修正3像素的问题。

  总之,实现的方法是多种多样的,这只是本人在学习过程中总结的一点经验,权当抛砖引玉,希望能对您有所帮助,当然您有更好的办法和布局,欢迎一块来学习,交流,让web标准在中国得到更好的发展。

如果您要实现未知高度底部平齐,请参考24例