- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- [Risolto] usare float left o right [Non floatta]
-
[Risolto] usare float left o right [Non floatta]
Il div box_flash dovrebbe floattare a destra del div box_nav affiancandolo, invece floatta ma rimane sotto :bho:
div#box_nav{ background-color:#fff; margin:0; width:194px; height:236px;} div#box_flash{ margin:0; width:506px; height:152px; float:right;} ```Dove sta l'errore?
-
Ciao Yalesh, e benvenuto.
come sono messi i div nell'html?
-
@Meryk said:
Ciao Yalesh, e benvenuto.
come sono messi i div nell'html?
Grazie per l'interesse...
ecco il codice:<div id="container">
<div id="testata"><img src="img/header.gif"></div>
<div id="box_service">
<div id="box_nav"><img src="img/barnav.gif"></div>
<div id="box_flash"></div>
</div>
</div>
-
inverti l'ordine di box_nav e box_flash.
Oppure dai a box_nav il float left.<title>Documento senza titolo</title> <style type="text/css"> #box_nav{ background-color:#fff; margin:0; width:194px; height:236px; border:1px solid blue;} #box_flash{ border:1px solid red; margin:0; width:506px; height:152px; float:right;} </style> </head> <body> <div id="container"> <div id="testata">testata</div> <div id="box_service"> <div id="box_flash">box flash</div> <div id="box_nav">box nav</div> </div> </div> </body> </html>
-
@Meryk said:
inverti l'ordine di box_nav e box_flash.
Oppure dai a box_nav il float left.Grazie Merik, c'hai preso...ho risolto invertendo l'ordine dei div. Ho provato anche a cambiare il float mettendolo left ma restava sotto.
-
se metti float left, non devi cambiare l'ordine del div e dare la proprietà di float al primo ( nel tuo caso box_nav in posizione originale).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> #box_nav{ background-color:#fff; margin:0; width:194px; height:236px; border:1px solid blue;**float:left;**} #box_flash{ border:1px solid red; margin:0; width:506px; height:152px; } </style> </head> <body> <div id="container"> <div id="testata">testata</div> <div id="box_service"> ** <div id="box_nav">box nav</div>** <div id="box_flash">box flash</div> </div> </div> </body> </html> ```la differenza visiva è che con il float left i div si affiancano rimanendo sulla sinistra del contenitore, con il float right i div si affiancano, ma quello che flotta a destra andrà il più a destra possibile del suo contenitore. ...spero di essere stata chiara! meryk
-
PS: ho cambiato titolo in modo che se qualcuna ha una problematica simile, può usare questo post come riferimento...
Sarebbe buona cosa dare i titoli ai post in modo che siano più specifici!