Question

How would I start If I wanted to do something like the following illustration using the markup shown below?

Layout http://img714.imageshack.us/img714/2126/asdasdegg9f583.png

Snippet of markup:

<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>

The <section> would be the red shaded part and the list items would be the boxes that are surrounding the <section>.

Can I just use HTML and CSS on this one or do I have to use Javascript? Anyone that could help me point to the right direction would be much appreciated. Thank you.

Answer 1

You have boxes in top, right and left areas for that there are 2 solutions came in my mind:

1. Use three different ul li set for top, right and left then handle them separately using css for the top boxes use float:left, height and overflow hidden also give width and height on its parent tag “ul” and then position it on top. For the left you don’t neeed to use float for li tags just give them width, height and overflow hidden then positioned its parent ul. Do similar with right.

2. Using same (single) ul li set you’ll need to place class names on each li to position them on their right place.

Makes sense? 🙂