css的效果问题，怎么实现不了啊

Question

body {
}
#x
{
width:1024px;
height:768%;
background-color:Red;
position:relative;
}
#x.top
{  position:absolute;
width:800px;
height:100px;
    top:0px; 
}
#.left
{  position:absolute;
width:198px;
height:17px;
    float:left;
    top:100px;
    font-family:华文新魏;
    background-color:Red;

left:0px;
}
#x.right
{  position:absolute;
width:198px;
height:60%;
    float:right;
    top:100px;
    font-family:@华文新魏;
    background-color:Red;
    right:0px;
}
#x.end
{  position:absolute;
width:1024px;
height:30px;
bottom:0px;
font-family:仿宋_GB2312;
background-color:Yellow;
}不知道大家能否看的懂我的样式，新手，嘿嘿，
我就是想实现一个效果，我定义四个层，上 top 中间的左（left） 右（right） 底部的end
想要的效果是顶部的层剧中，然后左边的层是浮动在#x这个范围内的最左边，right浮动在#x的最右边，底部就不用说了，紧挨着页面最下边，但是实现不了，有没高手帮忙看下，到底代码是哪里出错了， 

Answer 1

#x里边的长度哪里错了，应该是height：768px；

Answer 2

    top:100px;
改下看行不

Answer 3

你中间两个层用的是绝对定位,float:XX就失效了
都绝对定位了还怎么可能浮动?
你应该把X层的padding-top:    设置为top层的height
的层用float浮动,绝对定位一般不会用在中间的那块位置的
当然,你还要先把默认的margin和padding消除那样才好计算
top层也没必要使用绝对定位,相对定位要居中可以使用margin:0px auto;来实现
body {
}
*{/*--消除默认间距---*/
    margin:0px;
    padding:0px;
}
#x
{
    margin:0px auto;/*--使x层居中---*/
    padding-top:100px;/*--隔出top层的高度---*/
    width:1024px;
    /*--height:768%;   底层最好不要定义高度---*/
    background-color:Red;
    /*--position:relative; 默认的就是相对定位,不用再写弄的代码太长---*/
}
#x.top
{  
    /*--position:absolute;搞不懂为什么要用绝对定位,使用相对定位不就可以么?---*/
    margin:0px auto;
    width:1024px;
    height:100px;
    top:0px; 
}
#x.left
{  
    width:198px;
    height:17px;
    float:left;
    font-family:华文新魏;
    background-color:Red;
}
#x.right
{  
    width:198px;
    height:60%;
    float:right;
    font-family:@华文新魏;
    background-color:Red;
}
#x.end
{  
    width:1024px;
    height:30px;
    bottom:0px;
    font-family:仿宋_GB2312;
    background-color:Yellow;
}大概就是这样,随手修改的,没测试,你自己按我说的试试

Answer 4

对了,如果top层一定要用绝对定位的话才要在
#x
{
    padding-top:100px;/*--隔出top层的高度---*/
}
用这句,因为绝对定位是独立于其它层的,所以必须显式的把那层的空间隔出来,要不然会重叠

Answer 5

top:0px; 
这句也可以去掉,因为这是使用绝对定位时才生效的

Answer 6

页面元素的定位默认是静态定位哈，即 position:static;这种定位是比较简单的，楼主可以试试下面的代码，我就不测试了<div style="width:960px; height:100px; margin:0 auto;">Header</div><div style="width:960px; height:100px; margin:0 auto;">
    <div style="width:300px; height:500px; float:left;">Left</div>
    <div style="width:660px; height:500px; float:right;">Right</div>
</div><div style="width:960px; height:100px; margin:0 auto; clear:both;">Footer</div>这种是一般的写法哈，还可以用其他的方式实现，不用浮动也是可以的。