使用div而不是table的基本布局

时间:2012-02-18 11:57:27

标签: css layout html

---------------------------------
menu
---------------------------------|
content                 |Feeds   |
                        |        |
                        |        |
---------------------------------|

我想使用div来分隔内容和Feed,而不是使用表格

我试过了

的CSS。

#left
{
   clear:left;
   float:left;
   position:fixed;
}
#right
{
   float:right;
   position:absolute;
}

HTML

<div>
   <div id="left">Content</div>
   <div id="right"> Feeds</div>
</div>

1 个答案:

答案 0 :(得分:5)

Check this out.

<div id="container">
    <div id="menu">Menu</div>
   <div id="left">Content</div>
   <div id="right"> Feeds</div>
    <div id="footer"> Footer</div>
</div>


body{
    width: 760px;
    margin: 0 auto;
}
#container{
    position:relative;
}
#menu
{
    border: 4px solid orange;
}
#left
{
      float:left;   
}
#right
{
   position:fixed;
    right: 10px;
    top: 25px; /*Change as per your need */            
}
#footer{
    border: 4px solid aqua;
    clear:both;
}