список в 3 колонки

[necro]

Уже перепробывал все что в голову влезло, ничего не получается, если бы див этот не должен был тянуться вниз по содержимому, то через float нормально было бы, но он должен тянуться и хоть убей не могу ничего придумать, может кто сталкивался, подскажите пожалуйста.

<div id="container">
		<div id="content">
      <div id="spisok">
          <div id="spisoktitle">
          </div>
            <div id="left">
        <ul>
		<li>акустические компоненты</li>
		<li>вакуумные приборы</li>
    <li>генераторы</li>
    <li>диоды</li>
    <li>дисплеи</li>
    <li>дроссели</li>
		<li>дроссели для светильников</li>
    <li>измерительные приборы</li>
    <li>индуктивность</li>
    <li>инструмент</li>
    <li>источники питания</li>
    <li>кабельная продукция</li>
        </ul>
            </div>

             <div id="top">
        <ul>
		<li>акустические компоненты</li>
		<li>вакуумные приборы</li>
    <li>генераторы</li>
    <li>диоды</li>
    <li>дисплеи</li>
    <li>дроссели</li>
		<li>дроссели для светильников</li>
    <li>измерительные приборы</li>
    <li>индуктивность</li>
    <li>инструмент</li>
    <li>источники питания</li>
    <li>кабельная продукция</li>
        </ul>

            </div>
                <div id="right">
        <ul>
		<li>акустические компоненты</li>
		<li>вакуумные приборы</li>
    <li>генераторы</li>
    <li>диоды</li>
    <li>дисплеи</li>
    <li>дроссели</li>
		<li>дроссели для светильников</li>
    <li>измерительные приборы</li>
    <li>индуктивность</li>
    <li>инструмент</li>
    <li>источники питания</li>

        </ul>
            </div>

      </div>
		</div><!-- #content-->
	</div><!-- #container-->

#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 170px 0 430px;
}

#spisok {
  position:relative;
  left:-50px;
  background: #ebebeb;
  min-width:735px; 
	margin-bottom: 30px; 
	color: white;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6);
zoom: 1;

}

#spisok ul  {
padding-left:40px;
}


#spisok li {
font: 12px Tahoma, sans-serif;
color:black;
line-height: 40px;
}
#spisoktitle {
  font: 20px Tahoma, sans-serif;
	background: url(image/top1.png) repeat-x; 
	height: 60px; 
	padding-left: 30px; 
	padding-top: 5px;
	border-radius:  6px 6px 0 0; 
-moz-border-radius:6px 6px 0 0;
}

#left  {

}

#top {

}

#right  {

}

http://itmages.ru/image/view/374183/fec8a140

[necro]

сделал с помощью таблицы, но если кто подскажет, как это сделать без неё буду благодарен.

[Cubka]

сделал с помощью таблицы, но если кто подскажет, как это сделать без неё буду благодарен.

Попробуй с этими стилями. Оно?

html, body { width:100%;height:100%; overflow:hidden;  padding:0; margin:0;}
#container { width: 100%;height:100%;}
#content { padding: 0 170px 0 40px;}
#spisok {
  display: inline-block;
  background: #ebebeb;
  min-width:735px; 
        margin-bottom: 30px; 
        color: white;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); 
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6)
        progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6);
zoom: 1;
}
#spisok ul  {padding-left:40px;}
#spisok li {font: 12px Tahoma, sans-serif;color:black;line-height: 20px;}
#spisoktitle {
  font: 20px Tahoma, sans-serif;
        background: url(image/top1.png) repeat-x; 
        height: 60px; 
        padding-left: 30px; 
        padding-top: 5px;
        border-radius:  6px 6px 0 0; 
-moz-border-radius:6px 6px 0 0;
}
#left {float:left; margin:5px;}
#top {float:left; margin:5px;}
#right {float:left; margin:5px;}

[hedgehog]

overflow: hidden; контейнеру, в который вложены флоатнутые элементы и они будут его растягивать

[necro]

спасибо помогло, а ещё вопрос, как лучше оформить вот такое вот содержимое? а то тут так посмотреть слишком много ячеек получается, может можно как-то уменьшить мороку?

http://itmages.ru/image/view/375035/349b7b6d

[DImas95]

спасибо помогло, а ещё вопрос, как лучше оформить вот такое вот содержимое? а то тут так посмотреть слишком много ячеек получается, может можно как-то уменьшить мороку?

http://itmages.ru/image/view/375035/349b7b6d

Тут наверное только таблицей, это же табличные данные

[necro]

Добрый вечер, помогите исправить косяк)

http://itmages.ru/image/view/379220/29c1572b

на картинке показано что и как вот код.

      <div id="spisok">           
<div id="spisoktitle">               
</div>              
<div class="kartinka">              
 <div>                 
<img src="image/akustika.png" alt=""/>                
</div>                
<div class="kartinkatxt">               <p>Акустические<br/>компоненты</p>               
</div>              
 </div>                
 <div class="kartinka">              
 <div>                
 <img src="image/antenna.png" alt=""/>                
</div>                
<div class="kartinkatxt">              
 <p>Антенны</p>              
 </div>               
</div>                
<div class="kartinka">            
   <div>                
 <img src="image/vakuum.png" alt=""/>               
 </div>               
 <div class="kartinkatxt">              
 <p>Вакуумные<br/> приборы</p>           
    </div>               
</div>               
   <div class="kartinkaimg">              

   <img src="image/vent.png" alt=""/>            
    </div>                
<div class="kartinkatxt">              
 <p>Вентиляторы</p>             
  </div>      
         </div>  
</div>

#spisok {   position:relative;  
 margin-left:-50px;  
 background: #ebebeb;  
 min-width:735px;  	
margin-bottom: 30px;  	
color: white; 	
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);  	
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);  
 box-shadow: 0 5px 10px rgba(0,0,0,0.5);   filter:progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6)         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6)         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6)         progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6); zoom: 1; overflow: hidden; border-radius:  0 0 6px 6px;  
-moz-border-radius:0 0 6px 6px 6px; } 
 #spisok ul  { padding-left:40px; }   
#spisok li { line-height: 30px; color:black; }
 #spisoktitle {   font: 20px Tahoma, sans-serif; 	background: url(image/top1.png) repeat-x;  	
height: 60px;  
padding-left: 30px;  	
padding-top: 5px; 	
border-radius:  6px 6px 0 0;  
-moz-border-radius:6px 6px 0 0; } 
.kartinka { float:left; margin:10px 0 10px 20px; 
width:125px; height:185px; }  
.kartinkatxt { overflow:hiden; 
float:left; position:relative; 
top:0px; 
left:5px; 
font: 14px Tahoma, sans-serif; color:black; 
} 

Edited January 4, 2012 by necro

[necro]

разобрался