<div id="left">
<!-- content -->
</div>
<div id="right">
<!-- content -->
</div>
Две колонки - одна фиксированной ширины, другая - резиновая!
Здравствуйте!
У меня возникла следующая проблема:
Создаю страницу с двухколоночной версткой
HTML:
CSS:
Т.е. блок right должен прижиматься к правому краю страницы и при этом иметь жестко заданную ширину в 140 пикселей, а блок left должен быть слева и занимать всю оставшуюся ширину экрана. Естественно, оба блока должны быть на одном уровне. Верстка резиновая, только дивами.
Как правильно задать ширину блока left? При этом желательно без применения скриптов :)
У меня возникла следующая проблема:
Создаю страницу с двухколоночной версткой
HTML:
Код:
CSS:
Код:
#left {
float: left;
width: ???
}
#right {
float: right;
width: 140px;
}
float: left;
width: ???
}
#right {
float: right;
width: 140px;
}
Т.е. блок right должен прижиматься к правому краю страницы и при этом иметь жестко заданную ширину в 140 пикселей, а блок left должен быть слева и занимать всю оставшуюся ширину экрана. Естественно, оба блока должны быть на одном уровне. Верстка резиновая, только дивами.
Как правильно задать ширину блока left? При этом желательно без применения скриптов :)
Не как))). Делай только одной float, вторая займёт всё оставшееся место. Ещё нужно отступ в margin сделать на 140px;
[html]
#left-coll {
float:left;
background:red;
width:140px;
}
#right-coll {
margin-left:140px;
background:green;
}
[/html]
[html]
#left-coll {
float:left;
background:red;
width:140px;
}
#right-coll {
margin-left:140px;
background:green;
}
[/html]
ibrnax: Вот так.
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled</title>
<style type="text/css">
<!--
body {
padding: 0;
margin: 0;
}
#left {
width: 100%;
height: 200px;
}
#right {
width: 140px;
height: 100%;
float: right;
background-color: silver;
color: white;
}
-->
</style>
</head>
<body>
<div id="left">
<div id="right"></div>
</div>
</body>
</html>
[/HTML]
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled</title>
<style type="text/css">
<!--
body {
padding: 0;
margin: 0;
}
#left {
width: 100%;
height: 200px;
}
#right {
width: 140px;
height: 100%;
float: right;
background-color: silver;
color: white;
}
-->
</style>
</head>
<body>
<div id="left">
<div id="right"></div>
</div>
</body>
</html>
[/HTML]