Css 为什么这两个div被推得这么低？_Css_Html

Css 为什么这两个div被推得这么低？

css html

Css 为什么这两个div被推得这么低？,css,html,Css,Html,我的HTML很简单，我有一个内容区域，它围绕着所有内容，在它里面我想要三个。其中两个必须具有固定的宽度，并且主要内容区域应该是灵活的我想知道我做错了什么-编辑这里是完整的代码抱歉，如果它有点长！： <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3

我的HTML很简单，我有一个内容区域，它围绕着所有内容，在它里面我想要三个。其中两个必须具有固定的宽度，并且主要内容区域应该是灵活的

我想知道我做错了什么-编辑这里是完整的代码抱歉，如果它有点长！：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>    
    <div id="header">
        <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        <ul id="topuserbar">
            <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
            <li><a href="#">Mis Anuncios</a></li>
            <li><a href="#">Perfil</a></li>
            <li><a href="#">Ayuda</a><img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
            <li><a href="#">Cerrar Sesion</a></li>
        </ul>
    </div>
    <div id="headershadow">
    </div>
    <div id="body">
        <div id="leftnavigation"></div>
        <div id="contentarea"></div>
        <div id="advertisingarea">
        </div>
    </div>


    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>


body
{
    background-image: url('images/test.png');
    background-repeat:repeat;
    margin:0;
    padding:0;
}

#header
{
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;
}

#headershadow
{
    background-color:Black;
    min-height:2px;
}

#topuserbar
{
    font-family:Georgia;
    font-size:large;    
    float:right;
    margin-top:35px;  
    margin-right:15px;
}

#topuserbar ul
{
}

#topuserbar li
{
    display:inline;
    margin-left:10px;
    color:#fff;
}

#topuserbar .helpicon
{
    position:relative;
    top:4px;
    left:2px;
}

#topuserbar a
{
    color:White;
}

#topuserbar a:hover
{
    color:Yellow;
}

/*****************BODY AREA*******************/

#body
{
    border: 1px solid red;
    min-height:800px;
    width:960px;
}

#leftnavigation
{
    border: 1px solid green;
    min-height:500px;
    float:left;
    width:190px;
}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:590px;
}

#advertisingarea
{
    border:1px solid orange;
    width:150px;
    float:left;
    min-height:500px;
}







身体
{
背景图片：url（'images/test.png'）；
背景重复：重复；
保证金：0；
填充：0；
}
#标题
{
背景图片：url（'images/headerBackground.png'）；
背景重复：重复；
宽度：自动；
}
#校长
{
背景色：黑色；
最小高度：2倍；
}
#topuserbar
{
字体系列：格鲁吉亚；
字体大小：大号；
浮动：对；
利润上限：35px；
右边距：15px；
}
#topuserbar ul
{
}
#李托普巴尔
{
显示：内联；
左边距：10px；
颜色：#fff；
}
#topuserbar.helpicon
{
位置：相对位置；
顶部：4px；
左：2px；
}
#topuserbar a
{
颜色：白色；
}
#topuserbar a:悬停
{
颜色：黄色；
}
/*****************身体面积*******************/
#身体
{
边框：1px纯红；
最小高度：800px；
宽度：960px；
}
#左导航
{
边框：1px纯绿色；
最小高度：500px；
浮动：左；
宽度：190px；
}
#内容区
{
边框：1px纯蓝色；
最小高度：500px；
浮动：左；
宽度：590px；
}
#广告区
{
边框：1px实心橙色；
宽度：150px；
浮动：左；
最小高度：500px；
}

可能是因为累积的1像素边框吗？

塞尔吉奥，我不确定这是否是答案，但尝试用轮廓替换边框。边框有像素宽度，而轮廓没有像素宽度。这可能会解决你的问题

CSS用法：

轮廓{1px纯红；}

可能是：

#headershadow
{
    background-color:Black;
    min-height:2px;

上方/下方的高度和填充物向下推动第二个和第三个div。添加

高度：43px（或更高）到#标题，向下推动其下方的元素，这将对齐3个主体div
萤火虫是你的朋友
 你用的是什么浏览器。在JSFIDLE中似乎工作正常。我看不到chrome中的错误…@Sergio您能给出完整的代码吗？与图片匹配的那个，可能有问题！thanks@Trufa：我现在添加了代码，谢谢大家的帮助！谢谢你的提纲，提示；从现在起，我将使用它。但我仍然看到div有点下移。