开发者

3 column layout, fixed vs. relative positioning CSS

开发者 https://www.devze.com 2023-03-22 00:04 出处:网络
I have a 3 column table layout with the center column being position:relative; inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)

I have a 3 column table layout with the center column being position:relative;

inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)

What I need is the form to have a liquid width when the browser widens, but it also needs to stick to开发者_C百科 the bottom of the page. So, if I use position:fixed; it stays at the bottom, but it overlaps the right sidebar. If I use position:relative; it stays between the sidebars like it should, but it scrolls with the page.

I made a little jsfiddle but it doesn't display fixed positioning. But you can see my code. http://jsfiddle.net/winchendonsprings/S5zkm/1/

Here you can see it overlap the right sidebar. http://i.imgur.com/awp07.png


#center {
    padding: 0 15px;
    background-color: green;
    position:relative;
}
div.main {
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

You can try that (absolute positioning within relative positioning parent). Play with the top and bottom values to position it vertically. (It should resize with the window horizontally). Is that what you want?

0

精彩评论

暂无评论...
验证码 换一张
取 消