scrivere attorno ad un div (o al massimo ad un'immagine)

**Orfeo93** · 13-12-2009, 19:00

'giorno, ho nuovamente bisogno di un aiuto.

In sostanza c'è un div contenitore al cui interno c'è un div con un' immagine e un testo.
Ora, dovrei mettere l'immagine in alto a destra e il testo a sinistra e sotto l'immagine.
Potrei fare, lo so, altri due div: uno a sinistra e uno sotto e spaccare il testo in due facendo un paio di milioni di prove e rischiando un risultato impreciso, però mi chiedevo se esistesse un metodo più semplice e intelligente.
Qualora non esistesse un comando per fare una cosa del genere, potrei anche abbandonare l'idea di scrivere intorno ad un div, ma in questo caso dovreste dirmi come scrivere direttamente attorno all'immagine.

Ho già provato a mettere float:left (e right) sul div-immagine, ma non cambia niente.

Grazie per gli aiuti.

**bionicoz** · 13-12-2009, 19:18

Cosa c'è che nn va col float?

codice:

<head>
<style>
#contenitore{
width: 300px; height: 300px;
background-color: #eee;
text-align: justify;
}
.flotta_dx{
float:right;
background-color:#e00;
width: 100px; height: 100px; 
margin: 3px;
}
</style>
</head>

<body>
<div id="contenitore">
<div class="flotta_dx">EEE</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

**miki003** · 13-12-2009, 19:32

Esempio molto veloce, sicuramente migliorabile

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.div-1 {
	border: none;
	text-align: left;
	width: 500px;
}

.div-1-1 {
	border: none;
	clear: both;
	float: left;
	padding: 10px;
	text-align: left;
	width: 230px;
}

.div-1-2 {
	border: none;
	float: left;
	line-height: 200px;
	padding: 10px;
	width: 230px;
}

.div-1-3 {
	border: none;
	clear: both;
	float: left;
	line-height: 95px;
	padding: 10px;
	width: 230px;
}

.div-1-4 {
	border: none;
	float: left;
	padding: 10px;
	text-align: left;
	width: 230px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div align="left" class="div-1-1">[img]image.jpg[/img]</div>
			<div class="div-1-2"></div>
			<div class="div-1-3"></div>
			<div align="left" class="div-1-4">
                  Testo testo testo testo testo testo testo testo testo 
                  testo testo testo testo testo testo testo testo testo 
                  testo testo testo testo testo testo testo testo testo 
                  testo testo testo testo
                  </div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**Orfeo93** · 13-12-2009, 19:43

Ok, ok: ho grossomodo capito dove sbagliavo. In pratica il div-immagine aveva questa caratteristica

codice:

margin:5px 0px 0px 415px;

levandola col float funziona e, anche se non ho capito perchè, il div non si sposta.
Comunque, problema risolto.

Grazie

Discussione: scrivere attorno ad un div (o al massimo ad un'immagine)

Strumenti discussione

Ricerca discussione

Visualizza

scrivere attorno ad un div (o al massimo ad un'immagine)

Permessi di invio