Как сделать две колонки — одна фиксированная, другая резиновая

Рассмотрим пример построения страницы из двух колонок — одна фиксированная 200px, другая тянется, причем общая их ширина имеет минимальную ширину 600px;

Код страницы:

<body>
   <div class="min_width">
      <div class="scroll_content">
         <div class="content">
            <div id="left">Эта колонка фиксированной ширины 200 px<⁄div>
            <div id="right">Эта колонка тянется min-width: 600px<⁄div>
         <⁄div>
      <⁄div>
   <⁄div>
<⁄body>

<body>

<div id="left">Эта колонка фиксированной ширины 200 px<⁄div>

<div id="right">Эта колонка тянется min-width: 600px<⁄div>

<⁄div>

<⁄body>

Код CSS:

* {
margin: 0;
padding: 0;
}
#left {
display: block;
position: relative;
background-color:#00cc00;
width: 200px;
height: 300px;
margin-left: -200px;
border: 1px solid #00f;
}
#right {
display: block;
position: absolute;
background-color: #FFCC00;
width: 99%;
height: 300px;
top: 0px;
border:1px solid #006600;
}
.min_width {
padding-left: 600px;
}
.scroll_content {
height: 0;
}
.content {
margin-left: -400px;
position: relative;
height: 0;
}

* {

margin: 0;

padding: 0;

}

#left {

display: block;

position: relative;

background-color:#00cc00;

width: 200px;

height: 300px;

margin-left: -200px;

border: 1px solid #00f;

}

#right {

display: block;

position: absolute;

background-color: #FFCC00;

width: 99%;

height: 300px;

top: 0px;

border:1px solid #006600;

}

.min_width {

padding-left: 600px;

}

.scroll_content {

height: 0;

}

.content {

margin-left: -400px;

position: relative;

height: 0;

}

Заметки про JQuery, PHP, Битрикс, Modx и другое:)

Как сделать две колонки — одна фиксированная, другая резиновая

Добавить комментарий Отменить ответ