Элементы окружают или обертывают другой элемент

Question

Как начать, если я хочу сделать что-то вроде следующей иллюстрации, используя разметку, показанную ниже?

Макет http://img714.imageshack.us/img714/2126/asdasdegg9f583.png

Фрагмент разметки:

<ul id="toc">
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
    <li>consectetur</li>
    <li>adipiscing</li>
    <li>elit</li>
    <li>Sed</li>
    <li>elementum</li>
    <li>dictum</li>
    <li>elit</li>
    <li>sit</li>
    <li>amet</li>
    <li>hendrerit.</li>
    <li>Aenean</li>
    <li>eget</li>
    <li>dictum</li>
    <li>magna.</li>
    <li>Vivamus</li>
    <li>elementum</li>
    <li>sapien</li>
    <li>volutpat</li>
    <li>dapibus</li>
    <li>ipsum</li>
    <li>laoreet</li>
</ul>
<section id="page">
</section>

<section> будет красной заштрихованной частью, а элементы списка будут прямоугольниками, окружающими <section>.

Могу ли я просто использовать HTML и CSS на этом или я должен использоватьJavascript?Любой, кто мог бы помочь мне указать правильное направление, был бы очень признателен.Спасибо.

Answer 1

У вас есть поля в верхней, правой и левой областях, для которых мне пришло в голову 2 решения:

1. Используйте три разных ul ul набора для top, right и left, затем обрабатывайте их отдельно, используя css для верхних полей, используйте float: left, height и overflow hidden также дают ширину и высоту для родительского тега "ul" и затем поместите его сверху. Слева вам не нужно использовать теги float для li, просто укажите их ширину, высоту и переполнение, затем разместите родительский элемент ul. Делай подобное с правом.

2. Используя один и тот же (единственный) набор ul li, вам нужно разместить имена классов на каждом li, чтобы расположить их на своем месте.

Имеет смысл? :)

Answer 2

попробуйте использовать сетки oocss http://oocss.org/grids_docs.html