Резиновый шаблон

[Best1501]

Здравствуйте! Помогите пожалуйста сделать чтобы страничка оптимизировалась под экран.

Вот код сss

body {
	margin: 0;
	padding: 0;
	font-family: "aaaiight!";
	color: #000000;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

h2 { font-size: 1.6em; }
h3 { font-size: 1.2em; }

p, blockquote, ul, ol {
	line-height: 180%;
	text-align: justify;
	font-size: small;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style-position: inside;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}

/* Header */

#header {
	width: 660px;
	height: 200px;
	margin: 0 auto;
}

/* Logo */

#logo {
	float: left;
	width: 200px;
	height: 200px;
	background: url(images/img1.gif);
}

#logo * {
	text-align: center;
	text-transform: lowercase;
	text-decoration: none;
	font-weight: normal;
	color: #000000;
}

#logo h1 {
	padding: 74px 0 0 0;
	letter-spacing: -2px;
	font-size: 2.25em;
}

#logo h2 {
	padding: .25em 0 0 0;
	letter-spacing: -1px;
	font-size: 1em;
}

/* Menu */

#menu {
	float: right;
	width: 450px;
	height: 200px;
	background: url(images/img2.jpg);
}

#menu ul {
	float: right;
	margin: 0;
	padding: 180px 20px 0 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	padding: 0 0 0 2em;
	text-transform: lowercase;
	font-size: x-small;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000;
}

/* Content */

#content {
	width: 660px;
	margin: 0 auto;
	background: url(images/img3.gif);
	border-top: 10px solid #FFFFFF;
}

#colOne {
	float: left;
	width: 450px;
}

#colOne .top-head {
	padding: 30px 0 0 20px;
	border-top: 10px solid #F52EDA;
	font-family: "Comic Sans MS", cursive;
	font-size: 1.6em;
}

#colOne .content {
	padding: 20px;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
	text-align: justify;
}

#colTwo {
	float: right;
	width: 190px;
	padding-right: 10px;
	border-top: 10px solid #649CE2;
}

#colTwo .top-head {
	padding: 30px 0 0 20px;
}

#colTwo .content {
	padding: 10px 10px 10px 20px;
}

#extra {
	height: 10px;
}

/* Footer */

#footer {
	width: 660px;
	height: 60px;
	margin: 0 auto;
	background: url(images/img4.gif);
	border-top: 10px solid #FFFFFF;
}

#footer p {
	margin: 0;
	padding: 25px 0 0 0;
	text-align: center;
	font-size: x-small;
	color: #000;
	font-family: "aaaiight!";
}

#footer a {
	color: #A1A1A1;
}
#content #colOne .content p strong {
	font-weight: bold;
}
#content #colOne .content p strong {
	font-weight: bold;
}
.one {
	font-family: "aaaiight!";
}
.onq1 {
	font-family: "aaaiight!";
}
#content #colTwo .content li {
	font-weight: bold;
	font-family: "Comic Sans MS", cursive;
}
#content #colOne .content table tr td {
	text-align: left;
}
#colOne {
	text-align: center;
}

[rz00007]

Я что-то не совсем понял, тебе надо сделать из всего этого резинуку ?

[Лубышев]

угу... не видя сайт а только CSS надо угадать какой топикстартер юзает темплейт.... ))))

попробуй сунуть все это в div 100% ширины. вдруг проканает)

[MrJenika]

какую резину вы хотите получить задавая размеры в пикселях? в крайнем случае используйте проценты или скачайте пустые резиновые шаблоны и посмотрите как там все сделано.
А еще лучше посмотреть в сторону адаптивной верстки, все таки 21 век уже.

[Inacondition]

Табличная верстка - отличное решение для резины

[Лубышев]

Табличная верстка - отличное решение для резины

решение для ленивых. таблица предназначена для хранения данных в табличном виде а не для оформления сайта с помощью их. Вообще это старинный способ. он отжил свое. если уж позарез надо чтобы блок вел себя как таблица то так: display:table; (не помню держит ли ie8 это, на 7 давно забил)

[Inacondition]

Сообщение от Лубышев

Вообще это старинный способ. он отжил свое.

Как же он может устареть если по своей простоте ему равных нет пока... Мот это еще и способ для тех кто время экономит? Применение зависит от специфики сайта. В некоторых случаях - блоки, в некоторых - таблицы. Табличная верстка устареет когда адекватный аналог будет, я считаю)

[Лубышев]

Еще раз повторяю таблица для табличного контента. оформление - CSS и любой объект можно наделить свойствами таблиц.

[Naive]

Сообщение от Лубышев

Еще раз повторяю таблица для табличного контента. оформление - CSS и любой объект можно наделить свойствами таблиц.

Абсолютно согласен.
Для оформления слои, для таблиц в контенте — таблицы. Только так, это путь Джедая.
Тем более что таблицы не подходят никак для адаптивной верстки.
ПС. display: table, table-row, table-cell лучше не использовать, странная поддержка браузерами (ИЕ не поддерживает, а хром ваще странно с этим делом себя ведет, в других уже не тестил).
Тут лучше выбирать между плавающими элементами или строчно-блочными. С ними вполне можно получить необходимый результат.