Ciao, sto cercando di realizzare un layout fisso a 3 colonne ma ho un problema e non capisco dove stia sbagliando. In pratica le due colonne laterali più piccole sono al posto giusto, e in FF anche la parte più grande centrale, mentre in IE la parte centrale viene sotto alle due colonne, cioè, centrata ma in basso! Non posso mettere il link perchè il sito per adesso lo sto facendo in locale, allego però un'immgine del sito.
Prima questo effetto me lo faceva sulla colonna dx, poi spostandola in alto nell'html è andata al posto giusto, ma al suo posto si spagina la colonna centrale in IE.
Allego il css e l'html del sito.
/*Css Document - Design by PinkBetta*/
body {
font-family:Comic Sans MS, Times New Roman, Verdana;
background-color:white;
background-position:center;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
text-align:center;
font-size:14px;
}
h1 {
font-size:14px;
font-style:italic;
}
h3 {
font-size:18px;
font-style:italic;
}
p {
text-align:justify;
padding:10px;
}
#container {
margin:0px auto;
text-align:center;
width:800px;
height:auto;
background-color:white;
border:1px solid;
}
#header {
background-image:url(img/header.jpg);
width:800px;
height:100px;
background-repeat:no-repeat;
background-position:center;
margin:0px auto;
}
#csx {
width:150px;
height:auto;
margin:80px 0px 0px 0px;
padding:0px;
text-align:center;
float:left;
background-color:white;
}
#content {
width:500px;
height:auto;
overflow:auto;
margin:0px;
padding:0px;
text-align:center;
background-color:white;
}
#cdx {
width:150px;
height:auto;
margin:80px 0px 0px 0px;
padding:0px;
text-align:center;
float:right;
background-color:white;
}
#menu {
width:800px;
height:50px;
float:left;
margin:0px 0px 0px 10px;
}
#menu a:hover {
text-decoration:none;
color:#e18207;
}
img {
border:none;
}
#footer {
background-image:url(img/footer.jpg);
background-position:center;
background-repeat:no-repeat;
width:800px;
height:70px;
clear:both;
margin:0px auto;
padding:10px 0px 0px 0px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.::Una piccola storia::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div id="container">
<div id="header">
</div>
<div id=csx>
<p>sinistra</p>
<p>sx bhhbh</p>
<p>sx bhhbhbhkhkbkbkkhbhb</p>
</div>
<div id=cdx>
<p>destra bhhbhkb</p>
<p>destra bhhbh</p>
<p>destra bhhbhnjjjjnllnlnljnlj</p>
</div>
<div id="content">
<h3>Benvenuti</h3>
<p>mknnxlnxklnlsnxklnalxsnlksanlxksllkanslxlasnxlkasnxaskxkaxlkanxasnasknxlasn
xsxmmlskmxkmsmxksamxkmasxmksmksmxksmkksmkxmkxmsksmskmmskxmksmksmxkmxkkmxsmkmkx
nxksnkkskksksk</p>
<br>
<p>Buona visita del sito!</p>
<br>
<br>
</div>
<div id="footer">
<a href="http://www.pinkbetta.com"><img src="img/sito.gif"></a>
</div>
<body>
</body>
</html>
Prima questo effetto me lo faceva sulla colonna dx, poi spostandola in alto nell'html è andata al posto giusto, ma al suo posto si spagina la colonna centrale in IE.
Allego il css e l'html del sito.
/*Css Document - Design by PinkBetta*/
body {
font-family:Comic Sans MS, Times New Roman, Verdana;
background-color:white;
background-position:center;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
margin-top:10px;
text-align:center;
font-size:14px;
}
h1 {
font-size:14px;
font-style:italic;
}
h3 {
font-size:18px;
font-style:italic;
}
p {
text-align:justify;
padding:10px;
}
#container {
margin:0px auto;
text-align:center;
width:800px;
height:auto;
background-color:white;
border:1px solid;
}
#header {
background-image:url(img/header.jpg);
width:800px;
height:100px;
background-repeat:no-repeat;
background-position:center;
margin:0px auto;
}
#csx {
width:150px;
height:auto;
margin:80px 0px 0px 0px;
padding:0px;
text-align:center;
float:left;
background-color:white;
}
#content {
width:500px;
height:auto;
overflow:auto;
margin:0px;
padding:0px;
text-align:center;
background-color:white;
}
#cdx {
width:150px;
height:auto;
margin:80px 0px 0px 0px;
padding:0px;
text-align:center;
float:right;
background-color:white;
}
#menu {
width:800px;
height:50px;
float:left;
margin:0px 0px 0px 10px;
}
#menu a:hover {
text-decoration:none;
color:#e18207;
}
img {
border:none;
}
#footer {
background-image:url(img/footer.jpg);
background-position:center;
background-repeat:no-repeat;
width:800px;
height:70px;
clear:both;
margin:0px auto;
padding:10px 0px 0px 0px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.::Una piccola storia::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div id="container">
<div id="header">
</div>
<div id=csx>
<p>sinistra</p>
<p>sx bhhbh</p>
<p>sx bhhbhbhkhkbkbkkhbhb</p>
</div>
<div id=cdx>
<p>destra bhhbhkb</p>
<p>destra bhhbh</p>
<p>destra bhhbhnjjjjnllnlnljnlj</p>
</div>
<div id="content">
<h3>Benvenuti</h3>
<p>mknnxlnxklnlsnxklnalxsnlksanlxksllkanslxlasnxlkasnxaskxkaxlkanxasnasknxlasn
xsxmmlskmxkmsmxksamxkmasxmksmksmxksmkksmkxmkxmsksmskmmskxmksmksmxkmxkkmxsmkmkx
nxksnkkskksksk</p>
<br>
<p>Buona visita del sito!</p>
<br>
<br>
</div>
<div id="footer">
<a href="http://www.pinkbetta.com"><img src="img/sito.gif"></a>
</div>
<body>
</body>
</html>
