Css 将站点表单表转换为div

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

基本上，我想让网站做的是，无论何时我扩展或收缩浏览器窗口（相当基本），都保持中心位置。我无法使

右框

与

正文框

内联。我试图在CSS中使用

top:

和

left:

和

position:absolute

来放置

右框

，但当我决定对整个布局使用

时（为了使其保持居中），右框显然没有相对于其他元素保持原位

---

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

下面是一个简单的例子，我想你正在尝试做什么

HTML:

这是你的例子

---

下面是一个简单的例子，我认为你正在尝试做什么

HTML:

这是你的例子

请参阅下面的注释说明

#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 */
    }

请参阅下面的注释说明

#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 */
    }

---

好的，是的，是的。实际上，我还尝试将position:absolute和float:left添加到body_框中，然后将position:absolute和float:right添加到right_框中，这也起到了作用。我想长话短说，我需要更好地学习浮动！谢谢浮动的

#right_框

right也可以工作，但是

位置：绝对在这种情况下是不必要的。True。是的，我刚刚意识到这是一个错误（我有其他代码在那里）。基本上浮动：左浮动：右浮动对我来说很好。实际上，我还尝试将position:absolute和float:left添加到body_框中，然后将position:absolute和float:right添加到right_框中，这也起到了作用。我想长话短说，我需要更好地学习浮动！谢谢浮动的
#right_框
right也可以工作，但是
位置：绝对在这种情况下是不必要的。True。是的，我刚刚意识到这是一个错误（我有其他代码在那里）。基本上浮动：左和浮动：右对我来说很好。
#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;
    }

#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 */
    }