Redimensionar div según contenido

[jokings80]

Hola,

No consigo que un div que se crea de forma dinámica se redimensione según su contenido. La idea que tener un div principial (#divPrincipal) que tiene un ancho fijo. Dentro de este div, entre otras cosas, habrá otro div (#divCabecera) que es el que se debe de redimensionar según su contenido. Por último, dentro de #divCabecera se irán creando un número indeterminado de div con texto (#divTexto).

Por ahora lo tengo del siguiente modo,

Código:

#divPrincipal{
	position:relative;
	top: 0px;
	left: 0px;
	width: 550px;
	overflow-x: auto;
}

#divCabecera{
	position:relative;
	top: 0px;
	left: 0px;
	height: 28px;
}

.divTexto{
	position:relative;
	float:left;
	top: 0px;
	left: 0px;
	width: 50px;
	height: 28px;
}

Y el HTML,

Código HTML:

<div id='divPrincipal'>
	<div id='divCabecera'>
		<div class='divTexto'>Texto 1</div>

		<div class='divTexto'>Texto 2</div>

		<div class='divTexto'>Texto 3</div>

		<div class='divTexto'>Texto 4</div>

		...
	</div>

	Otros elementos...
</div> 

Lo que busco es que si hay muchos elementos "divTexto", el "divCabecera" se redimensione y si es necesario que "divPrincipal" muestre el scroll-x.

Tal y como está ahora "divCabecera" no se redimensiona y los elemenos que sobrepasan su anchura se escriben en la siguiente línea :(

He buscado por mil sitio y no encuetro como solucionarlo. ¿Alguna idea?

Gracias por la ayuda!!

[tredio]

algo asi:

http://jsfiddle.net/7MFnB/

[beeman00]

Estuve probando por aqui y esto fue lo unico que pude hacer....

Código CSS:

#divPrincipal{
    border:#CCC 1px dashed;
    position:relative;
    top: 0px;
    left: 0px;
    width: 550px;
    overflow-x: auto;
}
 
#divCabecera{
    border-bottom:#F00 1px dashed;
    position:relative;
    top: 0px;
    left: 0px;
    width: inherit;
    height:auto;
    overflow-x: auto;
}
 
.divTexto{
    border-left:#000 1px dashed;
    position:relative;
    float:left;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 28px;
}
 

Código HTML:

<div id='divPrincipal'>
    <div id='divCabecera'>
        <div style="width:1200px;height:28px;">
        <div class='divTexto'>Texto 1</div>
        <div class='divTexto'>Texto 1</div>
        <div class='divTexto'>Texto 1</div>
        <div class='divTexto'>Texto 2</div>
        <div class='divTexto'>Texto 3</div>
        <div class='divTexto'>Texto 4</div>
        <div class='divTexto'>Texto 2</div>
        <div class='divTexto'>Texto 3</div>
        <div class='divTexto'>Texto 4</div>
        <div class='divTexto'>Texto 2</div>
        <div class='divTexto'>Texto 3</div>
        <div class='divTexto'>Texto 4</div>
        </div>
    </div>
    <br>.-<br>.-<br>.-<br>Otros elementos
</div>
 

te sugiero que le sumes un poco de javascript, y que el ancho del div que contiene los textos se defina segun los elementos que lo contienen.

[jokings80]

Hola,

Gracias a todos a todos por responder, ha sido de gran ayuda. Es más o menos lo que estaba buscando :D

Muchas gracias!!