第四步：网页布局与div浮动等

1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。

Example Source Code[www.52css.com]

#sidebar-a{
float:right;
width:280px;
background:darkgreen;
}

　　表现如下：



2.往主要内容的盒子中写入一些文字。在html文件中写入：

Example Source Code

<divid="content">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>

　　但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
　　css代码如下：

Example Source Code

#content{
margin-right:280px;
background:green;
}

　　同时往边框里写入一些文字。在html文件中写入：

Example Source Code

<divid="sidebar-a">
Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.
Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.
Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus
euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.
Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,
purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.
</div>

　　表现如下：



　　这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。
　　因此我们往css中写入：

Example Source Code

#footer{
clear:both;
background:orange;
height:66px;
}

　　表现如下：