网页布局结构

Question

我试图把我的基本网页布局在一起，我遇到了一些问题。有人能帮我解决这个问题吗。我对CSS的理解不是很好。

代码：http://jsfiddle.net/HJLzt/

1. 粘性页脚正在工作，我希望在页眉和页脚之间有一个页面的左和右列。我不确定我的做法是否正确。
2. 在左右列和页眉和页脚之间，我想把内容放进去。我该怎么对着它。我找不到合适的方法，因为总是有溢出，我只希望它在左右列之间，没有什么可以切断的。

谢谢你的帮助!

编辑:我更新了布局，并使用了一些jquery来帮助解决问题。我知道我应该努力让一切都在css中工作，但这似乎是不可能的。

也许我应该加一句，我想要一个白板作为主题。我想要一个木制的框架，所以边栏总是要连接到页眉和页脚，因为顶部和底部的框架通过那里。

如果有人能看一看，告诉我这是否可以。

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#main header{
    height: 100px;
    width: 100%;
    background-color: #5d3be6;
}

footer{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background-color: #afeba4; 
}


/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#layout_left{
    float: left;
    width: 100px;
    min-height: 100%;
    height: 100%;
    background-color: #f21ce7;
}

#layout_right{

    float: right;
    width: 100px;
    min-height: 100%;
    height: 100%;   
    background-color: #f21ce7;
}

#content_layout{
    border-left: 100px solid #e4f662;
    border-right: 100px solid #e4f662;
    width: auto;
    height: auto;
    background-color: #c36161;
}

#content{
    margin: auto;
    width: 96%;
}

Answer 1

正如您所说的，您是CSS的新手，但我非常反对您的布局，这似乎是10年前的标准。(无意冒犯，当然，你是新来的，你还不知道该做什么，也不知道。)

研究在线投资组合的例子，使用谷歌的想法！

回答你的问题：

我认得你的粘性页脚代码，我也不是为我自己工作，也不是完全。

这不太好，我建议你：http://css-tricks.com/snippets/css/sticky-footer/

我会亲自告诉你，但是这个教程写得很好，易于理解和实现。

以及对中容器的使用：

margin: 0 auto; 

以文本为中心，您可以使用：

text-align: center;

希望这能有所帮助。