将站点表单表格转换为div

Question

我正在尝试获得一些div的实践学习。我正在将一个站点从表格转换为div，并在填充之前对站点进行布局。这是我的小提琴：

http://jsfiddle.net/DAM7K/

基本上，当我展开或收缩浏览器窗口时，我希望站点保持居中(非常基本)。我无法让right_box与body_box保持一致。我试着在我的CSS中使用top:、left:和position:absolute来放置right_box，但是当我决定在整个布局中使用<div align="center"> (以使其全部居中)时，right_box显然没有相对于其他元素留在适当的位置。

我知道这是一个很基本的问题，我现在只是把自己搞糊涂了。任何帮助都是最好的。谢谢!

Answer 1

这里有一个简化的例子，我认为你正在尝试做什么。

HTML：

<div class="wrapper">
    <div class="content"></div>  
    <div class="sidebar"></div>    
</div>

CSS：

.wrapper{width:400px; height:500px; margin:0 auto; background:lightgray;}
.content{width:200px; float:left; height:200px; background:salmon;}
.sidebar{width:200px; float:left; height:500px; background:lightblue;}

Demo

这是你的例子，fixed。

#body_box{
    ...
    width:750px;
    border:1px solid black;
    float:left;
    }

#right_box{
    width:246px; /* Not 250px because your borders add another 4px */
    border:1px solid black;
    float:left;
    }

Answer 2

请参阅http://jsfiddle.net/DAM7K/10/并查看下面的注释解释。

#CompleteLayout{
    width:1000px;
    height:1100px;
    border:1px solid black;
    margin: 0 auto; /* this centers it */
    overflow: auto; /* this clears the floats I added */
    }

#header{
    height:207px;
    width:998px; /* this needed to downsize for border */
    border:1px solid blue;
    }

#top_image{
    width:998px; /* this needed to downsize for border */
    height:167px;
    border:1px dotted #993300;
    }

#navbar{
    width:998px; /* this needed to downsize for border */
    height:40px;
    border:1px dotted #990000;
    }

#slideshow{
    width:998px; /* this needed to downsize for border */
    height:200px;
    border:1px dotted #990000;
    }

#body_box{
    height:686px;
    width:750px;
    border:1px solid black;
    float: left; /* added this to get right_box to sit beside */
    }

#right_box{
    height:686px;
    width:246px;  /* this needed to downsize for borders of this and body_box  */
    border:1px solid black;
    float: left; /* added this to get right_box to sit beside */
    }