Understanding the behavior of HTML / CSS
I have a CSS with the following attribute to the body tag and header:
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
}
div#header
{
width:1024px;
margin:5px auto;
height:180px;
background-color: rgb(91,25,79);
}
div.headerLeft
{
height:100%;
width:850px;
border-right:10px solid rgb(169, 171, 174);
background-color: rgb(124,71,111);
}
div#footer
{
margin-top:10px;
text-align:center;
position:relative;
font-size: 1.27em;
}
div#content
{
margin:auto 40px;
width:200;
overflow: auto;
}
In my HTML I have the following structure for the body:
<body>
<div id="header">
<div class="headerLeft" />
</div>
<div id="waycontact">
<div class="contactPaula">
<p>paulaMACHADO</p>
<p>crea 97877/D-MG</p>
<p>(31) 8725 5393</p>
</div>
开发者_Python百科 <div class="contactBeatriz">
<p>beatrizDAMAS</p>
<p>crea 94660/D-MG</p>
<p>(31) 9216 6968</p>
</div>
<div class="address">
<p>av. álvares cabral, 381, sl. 604, centro - belo horizonte - mg</p>
<p>cep: 30170-000 - telefax: (31) 3222 0345</p>
<p><a class="remove-linkcss" href="mailto:amsd_arq@yahoo.com.br">amsd_arq@yahoo.com.br</a></p>
</div>
</div>
<div id="content">
<img class="left space" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
<h2>Sobre a empresa</h2>
<p>A AMSD é focada em qualidade..</p>
</div>
<div id="footer">
<a class="current" href="#">home</a>
<span class="space">|</span>
<a href="#">quem somos</a>
<span class="space">|</span>
<a href="#">blog</a>
<span class="space">|</span>
<a href="#">na mídia</a>
<span class="space">|</span>
<a href="#">contato</a>
</div>
</body>
Here you can see the complete code of the page.
In CSS you can completely see it has a class called ".redborder" her March the HTML element with a red border. Note that the body marked with red. But the end result I noticed that the body is contemplating only the header. why he will not until the end?
Change:
<div class="headerLeft" />
to correct (HTML and "marketing" XHTML):
<div class="headerLeft"></div>
More information http://www.w3.org/TR/xhtml1/#C_3
Also add missing </div> (for <div id="header">). After this it should be ok.
Sorry if I have miss-interpreted the question, but you want the red border to stretch all the way over the content?
If so, a way I have found to achieve this is to simply add a clear: both; attribute to the last div you want covered by the red border div.
Appologies is this is not the question you wanted answeri
加载中,请稍侯......
精彩评论