Div non affiancati

**pastoweb** · 30-08-2004, 17:57

Ho due div (Left e Body) che dovrebbero essere visualizzati affiancati senza padding o margini, ma in IE risultano sempre separati da alcuni pixel, mentre NS li visualizza correttamente. Sono i primi esperimenti che faccio con i layout in css, quindi può darsi che abbia fatto qualche fagianata...qualcuno me la spiega per favore?

-----------

#Container {
position: relative;
width: 100%;
height:100%;}
#divHeader {
position: absolute;
height: 75px;
width: 100%;
left: 0px;
top: 0px;
background-color: #666666;}
#divLeft {
float: left;
top: 60px;
height:100%;
width: 340px;
margin: 0;
padding: 0;
background-color: #003366;}
#divBody {
background-color: #00ff33;
height:100%;
width: auto;
left: 340px;
top: 60px;
margin: 0;
padding: 0;}
#Footer {
position: absolute;
bottom: 0px;
height: 25px;
width: 100%;
background-color: #666666;
left: 0;}

**Jerry Masslo** · 30-08-2004, 18:39

dovresti postare anche l'html, oltre tutto sarebbe più comodo

**pastoweb** · 31-08-2004, 10:08

...hai ragione, scusa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../files/style2.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll=no>
<div id="Container">
<div id="divHeader"></div>
<div id="divLeft"></div>
<div id="divBody"></div>
<div id="Footer"></div>
</div>
</body>
</html>

**Jerry Masslo** · 31-08-2004, 14:10

per risolvere quel problema con ie era semplice e in più modi ma sono sorti problemi di tutti i tipi con gli altri browser, per cui alla fine ho dovuto rifarlo daccapo - vedi se così ti va bene:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0}
html, body {
height:100%
}
body {
color:white;
overflow:auto;
}
#Header {
position:absolute;
height:75px;
width:100%;
left:0;
top:0;
background: #666666;
}
#Container {
width: 100%;
height:100%;
background: #00ff33
}

#Footer {position:absolute;
bottom:0;
height:25px;
width:100%;
background: #666666;
left:0;
}
#divLeft {height:100%;
background: #003366;
width:340px;
float:left;}

#Container p {padding-top:80px}

</style>
</head>
<body>
<div id="Container">
<div id="divLeft">

Sinistra</p>
</div>

Destra</p>
</div>
<div id="Header">header</div>
<div id="Footer">footer</div>
</body>
</html>

**pastoweb** · 31-08-2004, 16:44

L'hai rifatto? Wow, grazie!

Vediamo se ho capito: in pratica hai eliminato il div di destra, e l'hai sostituito con Container p? Cioè posso utilizzare

come se fosse un <div>?

**Jerry Masslo** · 31-08-2004, 17:10

Originariamente inviato da pastoweb
L'hai rifatto? Wow, grazie!

Vediamo se ho capito: in pratica hai eliminato il div di destra, e l'hai sostituito con Container p? Cioè posso utilizzare

come se fosse un <div>?

Vediamo se ricordo?

gli absolute sono fuori il resto, tanto non serviva averli annidati e di conseguenza ho eliminato il relative da Container che non serviva uguale, poi per le pseudo-colonne quella di sinistra è un float mentre a destra è container stesso che posiziona il testo a destra visto che la parte sinistra è già occupata, che altro, ora c'è un overflow:auto; al body per togliere la barra visto che sta dentro la finestra ma ora che ci penso converrebbe reinfilare footer dentro container per garantirsi un corretto funzionamento nel caso il contenuto non trovi spazio nella finestra, ora vedo se è semplice sistemare questo.

poi i primi elementi dei due lati di container devono avere quel padding e volendo forse conviene fare una classe.

ora vedo

edit

non si può fare perché se uso il min-height a causa dei problemi di ie e delle modifiche che impone poi gli elementi annidati hanno problemi di ie quindi contentati,

se vuoi puoi aggiungere solo un classe di tipo:

.distanziatore {padding-top:80px;
padding-bottom:20px}

da dare a un div principale dentro ognuno dei lati in cui poi mettere tutto quello che ci va dentro, già sai che con questa impostazione se il contenuto non sta nella finestra son dolori giusto?

Discussione: Div non affiancati

Strumenti discussione

Ricerca discussione

Visualizza

Div non affiancati

Re: Div non affiancati

Giusto...

Permessi di invio