CSS трабла

Статус
В этой теме нельзя размещать новые ответы.
[/root.]

[/root.]

Он самый
Регистрация
20 Май 2006
Сообщения
370
Реакции
70
* html #content-wrapper {height: 100%;}
#content-wrapper {clear: both;background:#F7F9FD;padding-bottom: 10px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #C4D0E8;}


* html #content {/*line-height: 1:2;*/}
* html #content {height: 100%; }

#content {
background-color: #FFFFFF;
border: 1px solid #EEF2FB;
padding: 15px;
margin: 10px 20px;
}


#content-left-fixed {margin-right:315px;}
#content-right-fixed {float:right;width:310px;border-left-width:1px;border-left-style:solid;border-left-color:#C4D0E8;}
Нажмите для раскрытия...

<div id="content-wrapper">
<div id="content">
<div id="content-left-fixed">ТЕКСТ</div>
<div id="content-right-fixed">ТЕКСТ</div>
</div>
</div>
Нажмите для раскрытия...

Уже видите ошибку? Правильно, колонки находятся не на одном уровне. Правая ниже первой идет. Нужно чтобы было одиннаково. Где грабли? Спасибо.
 
Поставить float:left; в #content-left-fixed
 
stavil. ne pomoglo
 
float:left; - левому

display: inline; - правому
 
дык достаточно же уточнить float: left; для #content-left-fixed
 
Увы, не помогло. Создал все с нуля, но грабли остались.

#content-wrapper {background:#F7F9FD;border-bottom-color:#C4D0E8;border-bottom-style:solid;border-bottom-width:1px;clear:both;padding-bottom:10px;}
#content {background-color:#FFFFFF;border:1px solid #EEF2FB;margin:10px 20px;padding:15px;}

#content-left-fixed {float:left;margin-right:315px;}
#content-right-fixed {float:right;width:310px;border-left-width:1px;border-left-style:solid;border-left-color:#C4D0E8;}
Нажмите для раскрытия...

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/assets/test.css" />

</head>

<body>

<div id="content-wrapper">

<div id="content">
<div id="content-left-fixed">

<p>(18932, 42, '2.75', 'Достоинства стеклопакетов.', '', 'На первый взгляд может показаться, что стеклопакет устроен просто и незамысловато. Для примера возьмем два или более стекла и помещаем между ними специальную разделительную рамку. Обрабатываем раму снаружи герметиком, монтируем и устанавливаем в оконный проем. Вроде бы все просто, но это не так. Проблемы начинают возникать после осознания желаний потребителя по отношению к стеклопакету.\r\n\r\nА желания потребителя просты. Он хочет смотреть в окно и видеть то, что происходит снаружи. Объяснять не нужно, что чем выше оптические показатели стекла, тем стеклопакет лучше, а покупатель довольнее.\r\n\r\nНу и конечно же потребителю хочется что бы солнечный свет беспрепятственно проникал в его жилище. Следовательно стекло должно обладать высокой степенью </p>
</div>

<div id="content-right-fixed">

<p>(18932, 42, '2.75', 'Достоинства стеклопакетов.', '', 'На первый взгляд может показаться, что стеклопакет устроен просто и незамысловато. Для примера возьмем два или более стекла и помещаем между ними специальную разделительную рамку. Обрабатываем раму снаружи герметиком, монтируем и устанавливаем в оконный проем. Вроде бы все просто, но это не так. Проблемы начинают возникать после осознания желаний потребителя по отношению к стеклопакету.\r\n\r\nА желания потребителя просты. Он хочет смотреть в окно и видеть то, что происходит снаружи. Объяснять не нужно, что чем выше оптические показатели стекла, тем стеклопакет лучше, а покупатель довольнее.\r\n\r\nНу и конечно же потребителю хочется что бы солнечный свет беспрепятственно проникал в его жилище. Следовательно стекло должно обладать высокой степенью </p>
</div>
<!-- content-right END-->
</div>

</div>

</body>
</html>
Нажмите для раскрытия...

попробуйте кто-нибудь на досуге плиз.
 
Нашел багу. Правая колонка сдвигается вниз, только в том случае если текст в левой колонке слишком длинный.

Как пофиксить?
 
в данном случае, вёрстку 2-х колонок можно сделать следующим образом:
Код: 
#content {background-color: #fff;border:1px solid #EEF2FB;margin-right: 300px;}
#content-left-fixed {float:left;width:100%;margin-right: -1px;}
#content-right-fixed {float:right;position:relative;width:300px;margin-right: -301px;margin-left: 2px;}
пример такой верстки Для просмотра ссылки Войди или Зарегистрируйся

Правда, для ИЕ придеться в код страницы добавить:
Код: 
<!--[if IE]><style>
#content{
	height: 0;
	height: auto;
	zoom: 1;
}
</style><![endif]-->
 
MatDamned
такой вариант неработает в нормальных браузерах. и не должен.

вот как надо:
просто поменять местами - первым должен идти float'нутый блок, т.е. right.
и хаки для IE выбросте - меньше мусора - спокойней спится верстальщику.

HTML: 
<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#content-left-fixed {margin-right: 315px}
#content-right-fixed {float: right; width:310px}
/*]]>*/
</style>
</head>
<body>

<div id="content-right-fixed">
  <p>(18932, 42, '2.75', 'Достоинства стеклопакетов.', '', 'На первый взгляд может показаться, что стеклопакет устроен просто и незамысловато. Для примера возьмем два или более стекла и помещаем между ними специальную разделительную рамку. Обрабатываем раму снаружи герметиком, монтируем и устанавливаем в оконный проем. Вроде бы все просто, но это не так. Проблемы начинают возникать после осознания желаний потребителя по отношению к стеклопакету.\r\n\r\nА желания потребителя просты. Он хочет смотреть в окно и видеть то, что происходит снаружи. Объяснять не нужно, что чем выше оптические показатели стекла, тем стеклопакет лучше, а покупатель довольнее.\r\n\r\nНу и конечно же потребителю хочется что бы солнечный свет беспрепятственно проникал в его жилище. Следовательно стекло должно обладать высокой степенью </p>
</div>

<div id="content-left-fixed">
  <p>(18932, 42, '2.75', 'Достоинства стеклопакетов.', '', 'На первый взгляд может показаться, что стеклопакет устроен просто и незамысловато. Для примера возьмем два или более стекла и помещаем между ними специальную разделительную рамку. Обрабатываем раму снаружи герметиком, монтируем и устанавливаем в оконный проем. Вроде бы все просто, но это не так. Проблемы начинают возникать после осознания желаний потребителя по отношению к стеклопакету.\r\n\r\nА желания потребителя просты. Он хочет смотреть в окно и видеть то, что происходит снаружи. Объяснять не нужно, что чем выше оптические показатели стекла, тем стеклопакет лучше, а покупатель довольнее.\r\n\r\nНу и конечно же потребителю хочется что бы солнечный свет беспрепятственно проникал в его жилище. Следовательно стекло должно обладать высокой степенью </p>
</div>

</body>
</html>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху