Ayuda mostrando tabla solo con DIV's

[Farookh_Bulsara]

tengo un problema mostrando una tabla con solo divs

le puse width fijo a cada columna ,
pero el problema es cuando el texto de un div es mas q el ancho q se le dio se oculta, pero lo q yo quiero es q haga un salto de linea y por ende el height de toda la fila crezca
como hago eso?
les dejo el codigo porfa

Código PHP:

   <div class="content">
                <div class="headerList">
                    <div class="columnHeaderList1">Trip Number</div>
                    <div class="columnHeaderList2">Trip Name</div>
 
                    <div class="columnHeaderList3">Trip Date</div>
                    <div class="columnHeaderList4">GPS Location</div>
                    <div class="columnHeaderList5">Link To Gallery</div>
                    <div class="columnHeaderList6">Body of Water</div>
                    <div class="columnHeaderList7">Miles</div>
                    <div class="columnHeaderList8">State</div>
 
                    <div class="columnHeaderList9">Description</div>
                    <div class="columnHeaderList10">Directions to Launch</div>
                </div>
            <br />
           <div class="rows">
                      <div class="rowList">
                <div class="columnRowList1">1</div>
 
                <div class="columnRowList2">Travel around Virginia</div>
                   <div class="columnRowList3">09/09/2010</div>
                   <div class="columnRowList4">(12 14º)</div>
                <div class="columnRowList5">(http://www.google.com)</div>
                <div class="columnRowList6">Something</div>
                <div class="columnRowList7">100000</div>
 
                <div class="columnRowList8">Virginia</div>
                <div class="columnRowList9">(nada)</div>
                <div class="columnRowList10">(nose)</div>
                
             </div><br />
                          <div class="rowList">
                <div class="columnRowList1">2</div>
                <div class="columnRowList2">Enjoy Atlanta</div>
 
                   <div class="columnRowList3">10/10/2010</div>
                   <div class="columnRowList4">12 14º</div>
                <div class="columnRowList5">http://www.google.com</div>
                <div class="columnRowList6">Body of water</div>
                <div class="columnRowList7">100000</div>
                <div class="columnRowList8">Atlanta</div>
 
                <div class="columnRowList9">nada</div>
                <div class="columnRowList10">empty</div>
                
             </div><br />
                            </div></div> 
   

CSS:

Código PHP:

  .headerList,.rowList{
    display:block;
    width:inherit;
    clear:both;
    height:auto;
    }
    
.headerList    div
{
/*    display:inline;
    float:left;
    */
    float: left;
    padding: 5px;
    background: #464646;
    color:#CCC;
    border-color: #464646;
    border-style: solid;
    border-right-width: 0px;
    border-left-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    height:50px;
 
    }
 
.columnHeaderList1:hover,.columnHeaderList2:hover,.columnHeaderList3:hover,.columnHeaderList6:hover,.columnHeaderList8:hover
{
    background-color:#666;
    background-image:url(./img/asc.png);
    background-position:right;
    background-repeat:no-repeat;
    cursor:pointer;
    
}
.columnHeaderList1,.columnRowList1{position: relative;
width:50px;}
.columnHeaderList1{    background-image:url(./img/asc.png);
background-position:right;
background-repeat:no-repeat;}
.columnHeaderList2,.columnRowList2{position: relative;
width:100px;}
.columnHeaderList3,.columnRowList3{position: relative;
width:50px;}
.columnHeaderList4,.columnRowList4{position: relative;
width:100px;}
.columnHeaderList5,.columnRowList5{position: relative;
width:100px;}
.columnHeaderList6,.columnRowList6{position: relative;
width:50px;}
.columnHeaderList7,.columnRowList7{position: relative;
width:50px;}
.columnHeaderList8,.columnRowList8{position: relative;
width:100px;}
.columnHeaderList9,.columnRowList9{position: relative;
width:100px;}
.columnHeaderList10,.columnRowList10{position: relative;
width:100px;}
 
.rowList div
{
/*    display:inline;
    float:left;*/
    float: left;
    padding: 5px;
    border-color: #464646;
    border-style: solid;
    border-right-width: 0px;
    border-left-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    overflow:hidden;
    
 
    } 
   

[DragonX]

los datos tabulados deben estar dentro de una tabla, no dentro de DIV´s.
Paremos la fiebre del DIV.

[Farookh_Bulsara]

pero lei q es mucho mejor usar divs para tabular los datos q usar un table

[Carlangueitor]

No, leíste mal, es mejor usar DIV's para maquetar, las tablas se dejan para datos tabulados, no solo es usar DIV para todo lo que se te ocurra, tienes que usar las cosas correctamente.

Saludos

[Farookh_Bulsara]

q lio,entonces lo cambiare a un table

[DragonX]

Iniciado por Farookh_Bulsara

q lio,entonces lo cambiare a un table

es lo mejor!

[ArturoGallegos]

como ya te dijeron es mejor lo hagas con una tabla, aun así tu problema fue porque pusiste overflow:hidden; en esta sección:

Código CSS:

.rowList div
{
/*    display:inline;
    float:left;*/
    float: left;
    padding: 5px;
    border-color: #464646;
    border-style: solid;
    border-right-width: 0px;
    border-left-width: 1px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    overflow:hidden;
    }
 

[Farookh_Bulsara]

si,es q si no ponia eso le contenido de ese div se sobreponia sobre el siguiente