Terrano
26-05-2009, 19:03
Mình gặp trường hợp khi thẻ div bên trong thay đổi height, thẻ div bên ngoài không tự động thay đổi theo, mà bị trượt ra ngoài.
Có anh em nào đã từng gặp trường hợp như vậy chưa? Giải thích giúp mình với.
Thanks in advance!
Tất cả các div đều trượt ra ngoài div container.
<!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>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
background-color:#88CC81;
}
.container
{
margin-left:auto;
margin-right:auto;
border: 5px double #697D58;
background-color:#FFFFFF;
width: 980px;
}
.content
{
top:20px;
position:relative;
left: 0px;
}
.leftColumn
{
width: 201px;
float:left;
}
.midColumn
{
position:relative;
float:left;
left: 20px;
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="leftColumn">
leftColumn
</div>
<div class="midColumn">
Mid column
</div>
content
</div>
</div>
</form>
</body>
</html>
Có anh em nào đã từng gặp trường hợp như vậy chưa? Giải thích giúp mình với.
Thanks in advance!
Tất cả các div đều trượt ra ngoài div container.
<!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>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
background-color:#88CC81;
}
.container
{
margin-left:auto;
margin-right:auto;
border: 5px double #697D58;
background-color:#FFFFFF;
width: 980px;
}
.content
{
top:20px;
position:relative;
left: 0px;
}
.leftColumn
{
width: 201px;
float:left;
}
.midColumn
{
position:relative;
float:left;
left: 20px;
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="leftColumn">
leftColumn
</div>
<div class="midColumn">
Mid column
</div>
content
</div>
</div>
</form>
</body>
</html>