Нужно сделать двух колоночный дизайн с фиксированной шириной обоих колонок, причём что бы эти колонки растягивались по высоте в зависимости от контента!
Написал такой код
Код
<!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=windows-1251" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu">Top Menu</div>
<div id="right_menu">
<p>Right menu</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu">Top Menu</div>
<div id="right_menu">
<p>Right menu</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Код
/* CSS Document */
body{
background:url(../images/bg_body.gif) repeat-x #000000 top center;
}
* {
margin:0;
padding:0;
}
#wrapper{
background:url(../images/bg_wrapper.gif) repeat-y;
margin:0 auto;
width:700px;
min-height:100%;
}
#header{
background:url(../images/logo.gif) no-repeat;
height:240px;
}
#menu{
background:url(../images/menu.gif) repeat-x;
height:39px;
}
#right_menu{
width:211px;
float:right;
}
#content{
width:489px;
}
#footer{
background:url(../images/footer_bg.gif) repeat-y;
height:74px;
width:700px;
}
body{
background:url(../images/bg_body.gif) repeat-x #000000 top center;
}
* {
margin:0;
padding:0;
}
#wrapper{
background:url(../images/bg_wrapper.gif) repeat-y;
margin:0 auto;
width:700px;
min-height:100%;
}
#header{
background:url(../images/logo.gif) no-repeat;
height:240px;
}
#menu{
background:url(../images/menu.gif) repeat-x;
height:39px;
}
#right_menu{
width:211px;
float:right;
}
#content{
width:489px;
}
#footer{
background:url(../images/footer_bg.gif) repeat-y;
height:74px;
width:700px;
}
Но при заполнении правой колонки, в FireFox набранный текст сползает под футер хотя в осле всё впорядке!
Как можно решить данную проблему? А то сколько в гугле не искал для себя ничего не нашёл!
