DIV che si espanda orizzontalmente in base al contenuto

**dumbsim** · 02-03-2012, 13:39

Ciao a tutti,

probabilmente è una cretinata ma mi sta facendo impazzire. Vorrei creare un div che si allarga in base al contenuto, quindi non gli ho impostato nessuna width. Il div si allarga senza problemi fino ad arrivare alla larghezza della finestra del browser e poi manda il contenuto a capo... Io invece vorrei che continuasse ad allargarsi creando la scrollbar orizzontale.

Qualcuno sa come fare?

Io ho pensato di usare jQuery, fargli calcolare la somma della larghezza degli elementi contenuti e applicarla al div come width. Dovrebbe funzionare ma mi sembra un po macchinoso, ci dev'essere un modo più semplice!

**storm363** · 02-03-2012, 15:29

potresti postare il css relativo al div?

**deepgroove80** · 02-03-2012, 15:43

forse può esserti utile

http://jqueryui.com/demos/slider/#side-scroll

**LuigiMem** · 03-03-2012, 00:03

ciao dipende un po da cosa vuoi fare ma in line di massima basterebbe mettere al DIV
contenitore la proprieta "overflow:auto;"

ciao

**dumbsim** · 03-03-2012, 15:33

Ho provato con overflow: auto; e fa apparire una scrollbar sul div.

il codice HTML è questo:

Codice PHP:


<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">

<head>  



 

<link rel="stylesheet" href="css/style.css"> 

</head>

  <body>

      <section id=info>

             

        </section>

     <section id=portfolio>

         <article>

             [url="#info"]Hide Information[/url]

         </article>

         <article>

             <h1>[i]Websites:[/i]</h1>

             <ul>

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

                 [*][img]pics/web/r&r.png[/img]                 

             [/list]

         </article>

     </section>

  </body>

 </html>

mentre il CSS è:

codice:

section#info{
	background: #555;
	color: #fff;
	width: 320px;
-moz-box-shadow: inset -20px 0px 10px -10px #000;
-webkit-box-shadow: inset -20px 0px 10px -10px #000;
box-shadow: inset -20px 0px 10px -10px #000;
	min-height: 1100px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

section#portfolio {
	color: #333;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 320px;
	padding: 10px 0 0 30px;
}
	
	section#portfolio h1 {
		color: #000;
		margin: 0px;
		padding-top: 20px;
	}
	
	section#portfolio article {
		height: 250px;
		border-bottom: 1px dashed #555;
	}
		section#portfolio article ul{
			margin-top: 50px;
		}
	
		section#portfolio article ul li{
			display: block;
			float: left;
			list-style: none;
			margin-right: 20px;
		}
	
	section#portfolio article:first-of-type {
		height: 30px;
		border-bottom: 1px dashed #555;
	}
			section#portfolio article:first-of-type a {
		height: 20px;
		margin-top: 5px;
		background: #555;
		padding: 5px;
		color: #ccc;
		text-decoration:none;
	}

in pratica section#portfolio dovrebbe allargarsi a destra in base al contenuto anche se diventa più largo della finestra del browser.

Discussione: DIV che si espanda orizzontalmente in base al contenuto

Strumenti discussione

Ricerca discussione

Visualizza

DIV che si espanda orizzontalmente in base al contenuto

Permessi di invio