problema con margine del footer

**foxdar** · 08-06-2008, 17:23

ciao sto impazzendo con un problema per un layout a due colonne con i float (navigazione a destra).

premettendo che per il footer ho impostato la proprietà clear: both; ho un margin-top di 3px al div del footer ma se la colonna di navigazione è più lunga del contenuto il footer si piazza senza margini alla colonna di navigazione. se accade il contrario invece non ho alcun problema....

qualcuno saprebbe darmi qualche suggerimento?

ho provato anche a mettere un div separato che contiene la navigazione e i contenuti ma non cambia nulla...

help me...

thanks

**foxdar** · 08-06-2008, 17:37

perdonatemi ma la situazione è che se la colonna dei contenuti è più lunga il margine sparisce... differentemente da come avevo prcedentemente postato...

sorry

**dyuhs** · 08-06-2008, 20:33

:master: al posto tuo posterei un link (o almeno del codice)

**foxdar** · 09-06-2008, 09:39

eccolo scusa

PAGINA ASP

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
	<head>
		<title>titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="/styles/stile.css" />
	</head>
	<body lang="it-IT">
		<div id="container">
			<div id="header">header</div>
			<div id="purple">purple</div>
			<div id="right">right</div>
			<div id="content">content</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>

ed il CSS:

codice:

body { background-image: url(/images/back.gif); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; color: #000000; letter-spacing: 0.2mm; margin: 0px; text-align: center; }

div#container { width: 894px; margin: 0px auto; text-align: left; background-color: #ffffff; background-image: url(/images/backpage.gif); background-repeat: repeat-y; padding-left: 5px; padding-right: 5px; position: relative; }

div#header { width: 884px; height: 40px; margin: 0px auto; background-color: #cccccc; text-align: left; padding: 5px; margin-bottom: 3px; }
div#purple { width: 884px; height: 250px; margin: 0px auto; background-color: #ff00ff; text-align: left; padding: 5px; margin-bottom: 3px; }
div#content { width: 610px; height: 480px; margin: 0px auto; background-color: #ff0000; text-align: left; float: left; dislay: inline; padding: 5px; margin-bottom: 3px; }
div#right { width: 261px; height: 450px; margin: 0px auto; background-color: #ffff00; text-align: left; float: right; display: inline; padding: 5px; margin-bottom: 3px; margin-left: 3px; }
div#footer { width: 884px; height: 40px; margin: 0px auto; background-color: #00ff00; text-align: left; clear: both; margin-top: 3px; padding: 5px; }

ovviamente le altezze che sono impostate sono solo di prova...

**foxdar** · 09-06-2008, 11:34

allora... ripulendo un po' il codice del css in IE mi funziona regolarmente...

il problema è che sia in OPERA che in FIREFOX variando le altezze delle due colonne mi attacca il footer sotto alla colonna più lunga

riposto il CSS

codice:

body { background-image: url(/images/back.gif); font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; color: #000000; letter-spacing: 0.2mm; margin: 0px; text-align: center; }

div#container { width: 894px; margin: 0px auto; text-align: left; background-color: #ffffff; background-image: url(/images/backpage.gif); background-repeat: repeat-y; padding-left: 5px; padding-right: 5px; position: relative; }

div#header { width: 884px; height: 40px; background-color: #ff00ff; text-align: left; padding: 5px; margin-bottom: 3px; }
div#purple { width: 884px; height: 300px; background-color: #ff00ff; text-align: left; padding: 5px; margin-bottom: 3px; }
div#content { width: 610px; height: 400px; background-color: #ff00ff; text-align: left; float: left; dislay: inline; padding: 5px; }
div#right { width: 261px; height: 350px; background-color: #ff00ff; text-align: left; float: right; display: inline; padding: 5px; margin-left: 3px; }
div#footer { width: 884px; height: 30px; margin: 0px auto; background-color: #ffccff; text-align: center; clear: both; margin-top: 3px; padding: 5px; display: block; font-family: verdana, helvetica, sans-serif, arial; font-size: 9px; letter-spacing: 0.2mm; color: #000000; }

**foxdar** · 11-06-2008, 14:46

nessuno saprebbe aiutarmi??

help...

Discussione: problema con margine del footer

Strumenti discussione

Ricerca discussione

Visualizza

problema con margine del footer

Permessi di invio