为什么出去boder后就会错位呢,求大侠看看鄙人代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的个人博客</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" >
<!--header开始-->
<div id="header">
<div id="logo"><h1><a href="#">xxx的博客</a></h1>
<p> design by <a href="#">Free CSS Templates</a></p>
</div>
<div id="search"><form method="get" action="">
<fieldset>
<input type="text" name="s" id="search-text"
size="15" />
<input type="submit" id="search-submit"
value="GO" />
</fieldset>
</form>
</div>
</div>
<!--header结束-->
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相 册</a></li>
<li><a href="#">个人介绍</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div id="page">
<div id="sidebar">
<div id="sidebar_page">
<div
id="title_head"><h3><a href="#">用户登录</a></h3></div>
<div id="sidebar_item1">
<div style="margin:0px 18px 10px 18px; position:relative;top:5px;">
用户名: <input type="text" value="" /><br />
</div><div style="margin:10px 22px 10px 18px;">
密 码: <input value="" type="password"
/><br />
</div>
<div id="sb_footer"><div id="sub"><input class="inputDefault
button1" name='submit_login' type="submit" value=" 登 录 "></div><div id="sub1"><input
type="checkbox" name="RememberUsername" > 记住登录名</div></div>
</div>
</div>
<div id="sidebar_content">
<div
id="title_head"><h3><a href="#">日志类别</a></h3></div>
<div id="sidebar_item2">
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</div>
</div>
<div id="sidebar_content">
<div
id="title_head"><h3><a href="#">友情链接</a></h3></div>
<div id="sidebar_item2">
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</div>
</div>
<div id="sidebar_page">
<div
id="title_head"><h3><a href="#">日历</a></h3></div>
<div id="sidebar_item1"><p></p></div>
</div>
</div>
<div id="content">
<div
class="post">
<h2 class="title"><a href="#">Welcome to Zion Narrows</a></h2>
<div class="entry">
<p class="meta">Posted by <a href="#">Someone</a> on October 8, 2010
• <a href="#" class="comments">Comments
(64)</a> • <a href="#" class="permalink">Full article</a></p>
<p>This is <strong>Zion Narrows </strong>, a free, fully
standards-compliant CSS template designed by <a
href="http://www.freecsstemplates.org/">FreeCssTemplates</a> for <a
href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The picture in this template is
from <a href="http://pdphoto.org/">PDPhoto.org</a>. This free template is released under a <a
href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 2.5</a> license, so
you’re pretty much free to do whatever you want with it (even use it commercially) provided you
keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna.
Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.</p></div>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
<div class="entry">
<p class="meta">Posted by <a href="#">Someone</a> on October 8, 2010
• <a href="#" class="comments">Comments
(64)</a> • <a href="#" class="permalink">Full article</a></p>
<p>This is <strong>Zion Narrows </strong>, a free, fully
standards-compliant CSS template designed by <a
href="http://www.freecsstemplates.org/">FreeCssTemplates</a> for <a
href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The picture in this template is
from <a href="http://pdphoto.org/">PDPhoto.org</a>. This free template is released under a <a
href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 2.5</a> license, so
you’re pretty much free to do whatever you want with it (even use it commercially) provided you
keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna.
Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.</p></div>
</div>
<div class="post">
<h2 class="title"><a href="#">Welcome to Zion Narrows</a></h2>
<div class="entry">
<p class="meta">Posted by <a href="#">Someone</a> on October 8, 2010
• <a href="#" class="comments">Comments
(64)</a> • <a href="#" class="permalink">Full article</a></p>
<p>This is <strong>Zion Narrows </strong>, a free, fully
standards-compliant CSS template designed by <a
href="http://www.freecsstemplates.org/">FreeCssTemplates</a> for <a
href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The picture in this template is
from <a href="http://pdphoto.org/">PDPhoto.org</a>. This free template is released under a <a
href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 2.5</a> license, so
you’re pretty much free to do whatever you want with it (even use it commercially) provided you
keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis.
Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna.
Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus
egestas at sem.</p></div></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
/*主体框架*/
#page{margin:0px;float:left;width:999px;height:850px;}
/*左侧边*/
#sidebar{ margin:0px 15px 0px 0px;float:left;width:252px;height:816px;}
