Я хочу сделать что бы левый и правый столбец были ограничены линией dotted 1px например... но блоки у меня не фиксированной длины а могут изменяться в зависимости от информации... @@@@@@@@@ @@@@@@@@@ @@ @@ @@ @@ @@ @@ @@ @@@@@@@@@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14pt; color:#fff; } a { color: #0077dd; text-decoration: underline; } a:hover { text-decoration: none; } #Container { width:100%; height:50px; z-index:1; float: left; text-align: center; min-width: 800px; } #Header { width:100%; height:199px; z-index:1; float: left; background-image: url(background.gif); } /* Menu */ #menu { top: 100px; right: 100px; float: right; margin-right: 50px; margin-top: 50px; } #menu ul { list-style: none; } #menu li { display: inline; padding-left: 1.1em; margin-left: 1em; border-left: dotted 1px #E0E8EF; } #menu li.first { border: 0em; margin-left: 0em; padding-left: 0em; } #menu li a { color: #fff; padding: 0.1em; text-decoration: none; } #menu li a:hover { text-decoration: underline; } #Footer { width:100%; height:50px; z-index:1; float: left; background-image: url(background.gif); } #Content { width:100%; height:auto; z-index:1; float: left; } #content h2,h3,h4,h5,h6 { color: #545454; margin-bottom: 1em; border-bottom: dashed 1px #dfdfdf; padding-bottom: 0.3em; } #content h2 { font-size: 1.5em; } #content h3 { font-size: 1.1em; } #ContentLeft { width:25%; height:auto; z-index:1; float: left; } #ContentRight { width:24.9%; height:auto; z-index:1; float: right; } #ContentCenter { width:50%; z-index:1; float: left; border-right: dotted 1px #000; } #ContentCenterOne, contentcentertwo { width:100%; height:auto; z-index:1; float: left; border-bottom: dotted 1px #000; color: #0066FF; } #ContentCenterTwo { width:100%; height:auto; z-index:1; float: left; border-bottom: dotted 1px #000; color: #0066FF; } #ContentCenterThree { width:100%; height:auto; z-index:1; float: left; } --> </style></head> <body> <div id="Container"> <div id="Header"> <div id="menu"> <ul> <li class="first"><a href="#" accesskey="1" title="">Главная</a></li> <li><a href="#" accesskey="2" title="">О нас</a></li> <li><a href="#" accesskey="3" title="">Контакты</a></li> </ul> </div> </div> <div id="Content"> <div id="ContentLeft"> <h3>Левое блок 1</h3> <h3> </h3> <h3> </h3> <h3>Левое блок 2</h3> <h3> </h3> <h3> </h3> <h3>Левое блок 3</h3> <h3> </h3> <h3> </h3> <h3> </h3> <h3>Левое блок 4</h3> </div> <div id="ContentCenter"> <div id="ContentCenterOne"> <marquee behavior="scroll" scrollamount="5" scrolldelay="5" >Здесь будет бегущая строка ?1 Здесь будет бегущая строка ?1</marquee> </div> <div id="ContentCenterTwo"> <marquee behavior="scroll" scrollamount="10" scrolldelay="10">Здесь будет бегущая строка ?2 Здесь будет бегущая строка ?2</marquee> </div> <div id="ContentCenterThree"> <h3> </h3> <h3> </h3> <h3>Основное содержание </h3> </div> </div> <div id="ContentRight"> <h3>Правый блок 1</h3> <h3> </h3> <h3> </h3> <h3>Правый блок 2</h3> <h3> </h3> <h3> </h3> <h3>Правый блок 3</h3> <h3> </h3> <h3> </h3> <h3>Правый блок 4</h3> <h3> </h3> <h3> </h3> <h3> </h3> <h3> </h3> </div> </div> <div id="Footer"> <p> © 2008 <a href="http://validator.w3.org/check?uri=referer">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </p> </div> </div> </body> </html>
