Hey guys, I've struggled with this for a bit and don't seem to find a solution. Need an advise or the simple statement saying this is impossible (so far I think it is - impossible). Problem is: need 3 column flixible width layout, left fixed width, right aswell, middle - takes all of the space provided by body or whatever. Trick is that either right or left columns might be taller then middle, and we need them not to overlap the footer. Also docmode is Strict. I know that Table solves the problem in a sec, but I wonder is there a Div solution around?
嘿伙计们,我有点挣扎,似乎没有找到解决方案。需要一个建议或简单的声明说这是不可能的(到目前为止,我认为这是 - 不可能)。问题是:需要3列灵活的宽度布局,左边固定宽度,右边还有中间 - 占据身体或其他所有空间。诀窍是左右列可能比中间更高,我们需要它们不要与页脚重叠。 docmode也是严格的。我知道Table会在一秒内解决问题,但我想知道是否有Div解决方案?
3 个解决方案
#1
This is what you're looking for I think:
这就是你想要的我想:
http://matthewjamestaylor.com/blog/perfect-3-column.htm or with pixel widths: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm或像素宽度:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
It's XHTML strict, and supports all current browsers.
它是XHTML严格的,并支持所有当前的浏览器。
#2
YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.
YUI Grid CSS可能是你想要的。我不熟悉所涉及的CSS魔法,但它支持多种不同的布局。它似乎不支持固定的左右列。
#3
No tables challenges are a bit like waving a red flag to a bull for me:
没有桌面挑战对我来说有点像向公牛挥舞红旗:
http://edeverett.co.uk/experiments/noTables2.html
Tested in IE7, FF3, Chrome 2.
在IE7,FF3,Chrome 2中测试过。
This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.
这应该可以帮助您完成大部分工作,主要思想是在两侧列上使用负边距,主列设置为100%宽度。它可以从页面宽度的下限中受益。
(I've edited the example html to show how to include content in the centre section)
(我编辑了示例html以显示如何在中心部分包含内容)
#1
This is what you're looking for I think:
这就是你想要的我想:
http://matthewjamestaylor.com/blog/perfect-3-column.htm or with pixel widths: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm或像素宽度:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
It's XHTML strict, and supports all current browsers.
它是XHTML严格的,并支持所有当前的浏览器。
#2
YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.
YUI Grid CSS可能是你想要的。我不熟悉所涉及的CSS魔法,但它支持多种不同的布局。它似乎不支持固定的左右列。
#3
No tables challenges are a bit like waving a red flag to a bull for me:
没有桌面挑战对我来说有点像向公牛挥舞红旗:
http://edeverett.co.uk/experiments/noTables2.html
Tested in IE7, FF3, Chrome 2.
在IE7,FF3,Chrome 2中测试过。
This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.
这应该可以帮助您完成大部分工作,主要思想是在两侧列上使用负边距,主列设置为100%宽度。它可以从页面宽度的下限中受益。
(I've edited the example html to show how to include content in the centre section)
(我编辑了示例html以显示如何在中心部分包含内容)