allineamento immagine e testo, padding larghezza e float

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
Per questo codice devo utilizzare per forza di cose i css inline e ho dei problemi ad ottenere quello che voglio..
Ho un div container largo 400px all'interno del quale voglio inserire un'immagine larga la metà affiancata con un margine di 10px un div largo 190 con del testo dentro che abbia un padding di 10.
A parte tutti i problemi legati alla compatibilità cross-browser, hackeraggi e tutto quanto, il codice di sotto viene visualizzato in una maniera che non riesco proprio a capire.. L'ho testato su firefox , safari e IE5.2 per mac (n è il massimo ma è quello che ho..).
La cosa strana è che il div in firefox e safari, che visualizzano in modo identico, il div mi finisce completamente sotto l'immagine, anche rispettando la somma tra padding e width, anche in IE finisce parzialmente sotto l'immagine ma in più mi sposta leggermente l'immagine di 2-3px verso destra come se avesse un margine.. ma togliendo il float si allinea perfettemante a destra solo che poi il div finisce al rigo sotto.. nsomma non ci sto capendo niente

Codice:
<div style='width: 400px; margin-top:2px; background-color:#ffff00'>
  <img src='immagine.jpg' style='display:block; float:left'/>
  <div style='background-color:#D1D4D3; width:190px; height:160px; margin-left:10px;  padding:10px'>
      <div>Bla bla</div>
  </div>
</div>
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
ff ecc interpretano il box in modo diverso da ie5, in pratica la larghezza totale interpretata da ff è width+margin-padding, in ie5 la larghezza totale è width margin e padding sono all'interno.
io per evitare non utilizzo margin e paddin e do le posizioni in px
 

ntoflip

Utente Attivo
26 Ago 2008
50
0
0
era tutto un problema di float..

Grazie borgo per la risposta ma stamattina ho risolto semplicemente aggiungendo dei float:left un po' dappertutto.. purtroppo poi graficamente nel contesto non mi piaceva il risultato e ho buttato via quel codice e ora non posso postarlo.. sorry
 
Discussioni simili
Autore Titolo Forum Risposte Data
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
otto9due Allineamento tag <h1> e immagine.. HTML e CSS 2
I allineamento immagine WordPress 2
felino [Bootstrap] Allineamento verticale HTML e CSS 1
M [HTML] consiglio su label e checkbox riguardo l'allineamento HTML e CSS 3
C [HTML] Stampo contenuto di una variabile in TEXTAREA allineamento HTML e CSS 1
T Bootstrap: allineamento sotto il BADGE HTML e CSS 1
F [HTML] Allineamento in un TD HTML e CSS 2
C Report problema allineamento testo MS Access 0
E Form con campi allineamento HTML e CSS 4
N Griglia immagini allineamento "sfasato" HTML e CSS 3
R Bootstrap Carousel allineamento a sinistra impossibile! HTML e CSS 1
Creatt Allineamento al centro con paragrafo allineato. HTML e CSS 9
E allineamento del testo in vari div HTML e CSS 1
ivarello Allineamento e PHP PHP 3
Y problema allineamento form con internet explorer HTML e CSS 2
M Problemone con allineamento in tabella HTML e CSS 13
P Allineamento campi form HTML e CSS 7
M Allineamento Testo html css, help HTML e CSS 1
V problema allineamento div HTML e CSS 1
J Problema allineamento in base al browser HTML e CSS 1
W Problema di allineamento al TOP HTML e CSS 2
G Allineamento tabella verticale PHP 3
A Wordpress: allineamento logo WordPress 6
B problema allineamento contenuti sito HTML e CSS 1
I allineamento HTML e CSS 5
S Problema Allineamento Sito HTML e CSS 3
Nyl Allineamento immagini con CSS HTML e CSS 1
N allineamento tag xml PHP 0
K Allineamento di un movieclip Flash 2
A Allineamento Layout [Front Page] Webdesign e Grafica 0
J Problemi allineamento tabella e testo HTML e CSS 7
R allineamento con publisher HTML e CSS 0
M Problema Doctype e allineamento HTML e CSS 0
M allineamento linx HTML e CSS 0
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2
W Immagine come maschera photoshop Photoshop 1
L Ultima immagine Windows e Software 0
A Immagine decentrata con sfondo trasparente Photoshop 0
A Scontornare immagine di bassa qualità. Photoshop 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
Y Percorso assoluto file immagine HTML e CSS 9
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L Come caricare un'immagine in Canvas dinamicamente Javascript 0

Discussioni simili