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