плавающие дивы для сайта, пожалуйста, посмотрите на картину

Question

Это то, что у меня есть:

Это то, что я хочу

Как я могу это сделать?

<style type="text/css"> 
    .sitemap { 
     width:560px; 
    } 
    .sitemap .nav-box { 
     float:left; 
     width:170px; 
     margin-right:15px; 
     margin-bottom:20px; 
    } 
    .sitemap .nav-box span, 
    .sitemap .nav-box a { 
     display:block; 
     border-bottom:1px solid #434343; 
    } 
    .sitemap .nav-box span { 
     color:gray; 
     font-size:14px; 
     text-transform:uppercase; 
     border-bottom:1px solid #434343; 
     line-height:20px; 
     padding-bottom:3px; 
    } 
    .sitemap .nav-box a { 
     padding:3px 0; 
    } 
</style> 



<div class="sitemap"> 
    <h3>Sitemap</h3> 
    <div class="nav-box"> 
     <span>Hotels & Apartments</span> 
     <a href="#">Alle Hotels</a> 
     <a href="#">5 *****</a> 
     <a href="#">4 ****</a> 
     <a href="#">3 ***</a> 
     <a href="#">2 **</a> 
     <a href="#">Apartments</a> 
    </div> 
    <div class="nav-box"> 
     <span>Ferien-Wohnungen</span> 
     <a href="#">Mieten</a> 
     <a href="#">Kaufen</a> 
    </div> 
    <div class="nav-box"> 
     <span>Dining & Nightlife</span> 
     <a href="#">Gault Millau</a> 
     <a href="#">Walliser Spezialitäten</a> 
     <a href="#">Pasta & Pizza</a> 
     <a href="#">Asian</a> 
     <a href="#">Bergrestaurant</a> 
     <a href="#">Caffe & Bars</a> 
     <a href="#">Clubs & Après Ski</a> 

    </div> 
    <div class="nav-box"> 
     <span>Shopping & Lifestyle</span> 
     <a href="#">Bijouterie</a> 
     <a href="#">Fashion</a> 
     <a href="#">Sportgeschäfte</a> 
     <a href="#">Food & Beverage</a> 
     <a href="#">Apotheken</a> 
     <a href="#">Spa & Wellness</a> 
     <a href="#">Massagen</a> 
    </div> 
    <div class="nav-box"> 
     <span>Sports & Adventures</span> 
     <a href="#">Skipisten (Pistenbericht)</a> 
     <a href="#">Ski & Snowboard-Schulen</a> 
     <a href="#">Ski & Bergtouren</a> 
     <a href="#">Heliskiing</a> 
     <a href="#">Paragliding</a> 
     <a href="#">Indoor Klettern</a> 
     <a href="#">Curling</a> 
    </div> 
    <div class="nav-box"> 
     <span>Kultur & Events</span> 
     <a href="#">Kulturelles</a> 
     <a href="#">Eventkalender</a> 
    </div> 
    <div class="clear"></div> 
</div> 

Конечно же есть скрипка, а http://jsfiddle.net/caramba/rYkxQ/

Спасибо за любую помощь!

Answer 1

Вы можете попытаться сделать только дерево nav-div с несколькими блоками внутри. Этот код работает для меня (конечно, это лучше сделать Subdiv):

<div class="sitemap"> 
<h3>Sitemap</h3> 
<div class="nav-box"> 
    <span>Hotels & Apartments</span> 
    <a href="#">Alle Hotels</a> 
    <a href="#">5 *****</a> 
    <a href="#">4 ****</a> 
    <a href="#">3 ***</a> 
    <a href="#">2 **</a> 
    <a href="#">Apartments</a> 
    <span>Shopping & Lifestyle</span> 
    <a href="#">Bijouterie</a> 
    <a href="#">Fashion</a> 
    <a href="#">Sportgeschäfte</a> 
    <a href="#">Food & Beverage</a> 
    <a href="#">Apotheken</a> 
    <a href="#">Spa & Wellness</a> 
    <a href="#">Massagen</a> 
</div> 
<div class="nav-box"> 
    <span>Ferien-Wohnungen</span> 
    <a href="#">Mieten</a> 
    <a href="#">Kaufen</a> 
    <span>Sports & Adventures</span> 
    <a href="#">Skipisten (Pistenbericht)</a> 
    <a href="#">Ski & Snowboard-Schulen</a> 
    <a href="#">Ski & Bergtouren</a> 
    <a href="#">Heliskiing</a> 
    <a href="#">Paragliding</a> 
    <a href="#">Indoor Klettern</a> 
    <a href="#">Curling</a> 
</div> 
<div class="nav-box"> 
    <span>Dining & Nightlife</span> 
    <a href="#">Gault Millau</a> 
    <a href="#">Walliser Spezialitäten</a> 
    <a href="#">Pasta & Pizza</a> 
    <a href="#">Asian</a> 
    <a href="#">Bergrestaurant</a> 
    <a href="#">Caffe & Bars</a> 
    <a href="#">Clubs & Après Ski</a> 
    <span>Kultur & Events</span> 
    <a href="#">Kulturelles</a> 
    <a href="#">Eventkalender</a> 

</div> 
<div class="clear"></div>