请教一个简单的样式问题
这个样式，将网页打开后内容都缩在左上角，无法正常浏览，请问如何修改下能正常浏览

CSS code

body{    font-size:12px;    font-family:"黑体", Arial;}a:link {    color: #999;}a:visited {    color: #999;}a:hover {    color: #999;}a:active {    color: #999;}.body_area{    width:1240px;}.main_area{    float:left; width:960px;}.friend_area{    float:left; width:100%; overflow:auto; height:530px;}.friend_card{    float:left; width:300px; height:50px; margin:5px;border:solid #B8D4E8 1px;}.friend_grade{    float:left; width:50px; height:100%; background-color: #B8D4E8; color:#FFFFFF; font-size:24px; text-align:center;line-height:50px;}.friend_detail{    float:left; width:200px; height:100%;}.friend_param{    float:left; width:50px; height:15px; background-color:#F0F5F8; text-align:center; line-height:15px;}.friend_param_bottom_slave{    float:left; width:50px; height:15px; background-color: #EC7000; text-align:center; line-height:15px;}.friend_param_bottom_master{    float:left; width:50px; height:15px; background-color: #ADDC0E; text-align:center; line-height:15px;}.friend_param_content{    float:left; width:50px; height:20px; text-align:center; line-height:20px;}.friend_headPic{    float:left; width:50px;height:100%;}.friend_headPic_img{    width:50px; height:50px;}.friend_data{    float:left; width:140px;}.person_area{    float:left; display: none;}.person_param{    float:left; width:110px;height:70px; margin:5px;}.person_head{    height:20px;text-align:center; line-height:20px; background-color:#B8D4E8; font-size:14px; color:#FFFFFF;}.person_body{    height:50px;text-align:center; line-height:50px; background-color:#F0F5F8; font-size:20px; font-weight:bold; color:#B8D4E8;}.ctrl_area{    float:left; width:100%; margin:5px; display: none;}.task_area{    float:left; width:260px; margin-left:5px; display:none;}.task_target{    width:100%;margin-top:5px;}.task_target_title{    float:left; background-color:#B8D4E8;font-size:18px; height:30px; color:#FFFFFF;width:60px; font-size:18px; text-align:center; line-height:30px; margin-bottom:5px;}.task_target_body{    float:left; background-color:#F0F5F8;font-size:18px; height:30px; color:#B8D4E8;width:200px; font-size:16px; text-align:center; line-height:30px;margin-bottom:5px;}.task_head{    margin-top:10px;border-bottom: #B8D4E8 solid 2px;color: #09C;height:20px;line-height:20px; text-align:center;}.task_head_no{    float:left;width:30px;}.task_head_user{    float:left; width:40px;}.task_head_name{    float:left;width:40px; }.task_head_time{    float:left;width:150px; }.task_param{    float:left; width:100%;height:35px; line-height:35px;text-align:center; border-bottom:#B8D4E8 solid 1px;}.task_param_no{    float:left; background-color:#F0F5F8; color:#B8D4E8; width:30px; font-size:18px; font-weight:bold;}.task_param_user{    float:left; width:40px;}.task_param_name{    float:left; width:40px;}.task_param_time{    float:left; width:150px;}.login_dialog{    border: #B8D4E8 solid 1px;    text-align:center;    width:300px;    height:320px;    top: 50%;    left: 50%;    margin-left:-150px;    margin-top:-180px;    background-color: #F0F5F8;    position: absolute;    position:fixed;}.login_text{    float:left;    height:25px;    width:170px;    border:1px #B8D4E8 solid;    display:inline-block;    background-color:#FFF}.login_text_id{    width:135px;    height:20px;    border:none;    vertical-align: top;    line-height:20px;    font-size:14px;}.login_text_pwd{    width:160px;    height:20px;    line-height:20px;    font-size:14px;    border:none;}.login_user{    padding:5px;    cursor:pointer;}.login_select_user{    border:none;    width:25px;    height:25px;    cursor:pointer;}.login_user_list{    width:170px;     display:none;    font-size:14px;    text-align:left;    position:absolute;    background-color:#FFF;     border:1px #B8D4E8 solid;     border-top:0px;    margin:-4px 0px 0px -261px; }.login_btn{    border:none;    width:150px;    height:30px;    color:#FFF;    background-color:#369;}.login_error{    color: #F00;}.login_msg{    text-align:right;    width:270px;}.ctrl_area{    float:left;width:100%;height:40px; line-height:40px;}.ctrl_btn{    border:none;width:100px;height:30px;color:#FFF;margin-left:-5px;background-color:#369;}.dialog_area{    border: #B8D4E8 solid 1px;    background-color: #F0F5F8;    top: 50%;    left: 50%;    margin-left:-155px;    margin-top:-50px;    width:300px;    height:100px;    position: absolute;    position:fixed;    padding:5px;    display:none;}.dialog_user{    float:left;    width:80px;    height:65px;    border-right: #B8D4E8 solid 1px;}.dialog_user_pic{    text-align:center;}.dialog_user_name{    height:10px;    width:100%;    text-align:center;}.dialog_detail{    float:left;    width:200px;    height:60px;    margin-left:10px;}.dialog_detail_title{    float:left;    width:40px;    height:20px;    text-align:center;    line-height:20px;}.dialog_detail_param{    float:left;    width:150px;    height:20px;    line-height:20px;    border-bottom: #EAEAEA solid 1px;}.prog_bar{    background-color:#B8D4E8;    text-align:center;    color:#FFF;}.log_area{    float:left;    width:100%;    width:1225px;    height:230px;    display:none;}.log_msg{    text-align:center;}.log_head_tr{    color:#FFF;    height:15px;    line-height:15px;    font-size:14px;    text-align:center;    background-color:#B8D4E8;}.setting_dialog_area{    border: #B8D4E8 solid 1px;    background-color: #F0F5F8;    top:50%;    left:50%;    margin-left:-200px;    margin-top:-230px;    width:400px;    height:460px;    position: absolute;    position:fixed;    display:none;}.setting_dialog_title{    background-color: #B8D4E8;    height:20px;    color:#369;    padding-left:5px;    line-height:20px;    font-size:14px;    font-weight:bold;} 
 

[解决办法]
HTML代码也是非常重要的，我在这里见了很多都是CSS正确但HTML代码写错的例子了，比如各DIV之间应该是平铺、包含还是怎么样摆放有时候比这个元素的CSS更加重要。