Originariamente inviata da
Dr.chm
Eliminando le istruzioni "left:50%;" e "margin-left" il problema svanisce, ma ovviamente i div non vengono più centrati.
Chiaro. A me non convince comunque la logica che hai utilizzato, impostando dei posizionamenti assoluti e dei margin-left negativi.
Per centrare un blocco di div puoi racchiudere questi dentro un contenitore con dimensioni fisse al quale applichi la regola margin:0 auto;
Ti posto un esempio pratico in cui viene centrato l'intero blocco dei 3 div:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
html,body{
margin:0;padding:0
}
div#wrapper{ /* contenitore del blocco di DIV */
width:1012px; /* larghezza totale del blocco di DIV 675+337 */
height:650px; /* altezza totale del blocco di DIV 80+570 (potrebbe essere anche omessa)*/
margin:0 auto; /* allineamento centrale dell'intero blocco */
}
div#header{
height:80px;
line-height:20px;
padding-left:10px;
color: #FFFFFF
}
div#content{
width:675px;
height:550px;
float:left;
overflow:auto;
}
div#navigation{
width:337px;
height:570px;
float:left;
overflow:auto;
}
</style>
</head>
<body>
<div id="wrapper" style="background-color:navy">
<div id="header" style="background-color:red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id="navigation" style="background-color:yellowgreen">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="content" style="background-color:royalblue">
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
Rispondi quotando
