Question

Здравствуйте. Я переместил 1 и 2 контейнер к краям браузера через css а центр остался не изменным. Что нужно прописать что бы центр сайта как бы был привязан к контейнерам т.е если раздвигать контейнеры центер автоматически оптимизировался под все разрешения экрана.

 

код css

/*--------------------- Main content start ---------------------*/

#content {
 width: auto;
 margin: auto;
 padding-top: 1px;
 text-align: left;
}

#leftcol {
 float: left;
 width: 200px;
 text-align: left;
 position:relative;
 *z-index:5;
}

#rightcol {
 float: right;
 width: 240px;
 text-align: justify;
 position:relative;
}

#maincol {
 margin-top: 10px;
 margin-left: 10px;
 float: left;
 width: 580px; /*FOR IE*/
 text-align: justify;
 z-index: 1;
 *z-index: -1 !important;
}

.v-entry, #allEntries, .entTable{
 position:relative;
 z-index:2;
}

.eTitle {
 font: 14px 'Tahoma';
 color: #1282d8;
 text-transform: uppercase;
 margin-bottom: 5px;
}

.eTitle a {
 color: #1282d8;
}

.eTitle a:hover {}

.eMessage, .eText, .eAnswer {
 font: 12px 'Arial';
 color: #555555;
 text-align: justify !important;
 background: url(/.s/t/797/16.gif) repeat-x;
}

.cMessage {
 font: 12px 'Tahoma';
 text-align: justify !important;
}

.eDetails, .eDetails1, .eDetails2 {
 font: 11px 'Tahoma';
 color: #555555;
 background: #f5f5f5;
 border: 1px solid #dcdbe0;
 padding: 3px 15px;
 margin-top: 3px;
}

.cBlock1, .cBlock2 {
 background: #e8e7e7;
}

.postDescrFl, .postNameFl, .postTextFl {
 width: 99.4% !important;
 padding: 1px 0;
}

 

Comments

Вроде бы сам настроил если кому надо вот код css

/*--------------------- Main content start ---------------------*/

#content {
 width: auto;
 margin: auto;
 padding-top: 1px;
 text-align: left;
}

#leftcol {
 float: left;
 width: 200px;
 text-align: left;
 position:relative;
 *z-index:5;
}

#maincol {
 margin-top: 10px;
 margin-left: 205px;  изменил значение
 margin-right: 245px;  добавил и настроил под сайт
 float: none;    с left помеял на none
 width: auto; /*FOR IE*/ поставил на автоматичесий подгон для всех разширений экрана
 text-align: justify;
 z-index: 1;
 *z-index: -1 !important;
}

#rightcol {
 float: right;
 width: 240px;
 text-align: justify;
 position:relative;
}

 

.v-entry, #allEntries, .entTable{
 position:relative;
 z-index:2;
}

.eTitle {
 font: 14px 'Tahoma';
 color: #1282d8;
 text-transform: uppercase;
 margin-bottom: 5px;
}

.eTitle a {
 color: #1282d8;
}

.eTitle a:hover {}

.eMessage, .eText, .eAnswer {
 font: 12px 'Arial';
 color: #555555;
 text-align: justify !important;
 background: url(/.s/t/797/16.gif) repeat-x;
}

.cMessage {
 font: 12px 'Tahoma';
 text-align: justify !important;
}

.eDetails, .eDetails1, .eDetails2 {
 font: 11px 'Tahoma';
 color: #555555;
 background: #f5f5f5;
 border: 1px solid #dcdbe0;
 padding: 3px 15px;
 margin-top: 3px;
}

.cBlock1, .cBlock2 {
 background: #e8e7e7;
}

.postDescrFl, .postNameFl, .postTextFl {
 width: 99.4% !important;
 padding: 1px 0;
}

Answer 1

Немного не верное решение...
maincol должен быть по середине, так как вы задали обтекание слева. Мой совет, выберите адаптивный шаблон.
<div id="leftcol">
<div id="rightcol">
<div id="maincol">

Comments

А почему вы посоветовали выбрать адаптивный шаблон?

---

Советовали выбрать адаптивный так как с ним проблем по меньше и удобства для посетителей сайта больше с какого бы устройства у вам не пришли посетители(мобильный телефон, смартфон, планшет, нетбук, ноутбук итд).