вопрос на CSS. Как я могу получить проект css для работы с rails tabnav widget?

Question

Мне нужно быстрое решение для получения приличного макета, работающего в области отображения tabnav widget. Я уже использую чертеж css для других аспектов макета, но мне не хватает CSS-отрубов, чтобы выяснить, как отображать контейнеры чертежей в области содержимого tabnav.

область содержимого tabnav является <div class="main_tabnav_content" id="main_tabnav_content"> и это связанный с CSS:

.main_tabnav { 
    color: #000; 
    border-bottom: 1px solid #ccc; 
    margin: 13px 0px 0px 0px; 
    padding: 0px; 
    z-index: 1; 
    padding-left: 10px } 

.main_tabnav ul { 
    margin: 0px; 
    padding: 0px; 
} 

.main_tabnav li { 
    display: inline; 
    overflow: hidden; 
    list-style-type: none; } 

.main_tabnav li span.disabled { 
     color: #888888; 
     background: #FAFAFA; 
     border: 2px solid #DDDDDD; 
     border-bottom: none; 
     padding: 2px 5px 0px 5px; 
     margin: 0; 
     text-decoration: none;} 

.main_tabnav a, main_tabnav a.active { 
    color: #000000; 
    background: #EEEEEE; 
    font-weight: bold; 
    border: 1px solid #ccc; 
    padding: 2px 5px 0px 5px; 
    margin: 0; 
    text-decoration: none; } 

.main_tabnav a.active { 
    background: #FFFFFF; 
    border-bottom: 3px solid #FFFFFF; } 

.main_tabnav a:hover { 
    color: #FFFFFF; 
    background: #CCCCCC; } 

.main_tabnav a:visited { 
    color: #000000; } 

.main_tabnav a.active:hover { 
    background: #FFFFFF; 
    color: #000000; } 

.main_tabnav_content { 
    background: #FFFFFF; 
    padding: 20px; 
    border:1px solid #ccc; 
    border-top: none; 
    z-index: 2; 
} 

Я хотел бы иметь возможность поставить несколько столбцов внутри области main_tabnav_content как этот

<div class="span-5 colborder"> 
     stuff 
    </div> 
    <div class="span-5 colborder"> 
     stuff 
    </div> 
    <div class="span-5 colborder"> 
     stuff 
    </div> 

В в тот момент, когда отображаются столбцы, но поле main_tabnav_content не распространяется вокруг них. Любые предложения о том, как получить макет плана, вложенный в область main_tabnav_content?

От Blueprint: screen.css:

.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;} 
.last, div.last {margin-right:0;} 
.span-1 {width:30px;} 
.span-2 {width:70px;} 
.span-3 {width:110px;} 
.span-4 {width:150px;} 
.span-5 {width:190px;} 

, а также:

div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;} 

Answer 1

Я думаю, что если вы добавите это <div class="clearfix"></div> до конца main_tabnav_content div, он должен исправить проблему с поплавком.

Answer 2

У вас есть CSS для классов colborder пролет-5 &? Похоже, это может быть проблема с поплавком. В основном, что происходит, когда вы добавляете столбцы в div main_tabnav_content, div не расширяется, не так ли?