- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Spazio bianco tra div
-
Spazio bianco tra div
Ciao a tutti, ho un piccolo problema.. sto provando a realizzare "al volo" da un netbook una struttura a div con header, main, sidebar e footer in modo che la larghezza orizzontale sia 100%.
ho scritto un po' di html e css (sempre al volo..) ma tra il div MAIN e il div SIDEBAR c'è un fastidioso spazio bianco da un pixel su Chrome4 mentre su IE8 no. come faccio ad eliminare tale spazio anche da Chrome?
Questo è il codice (i colori dei div sono a caso.. solo per dividerli "graficamente")
//manca il doctype
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250"><title></title>
<style type="text/css">
#header{
background-color: #006666;
height: 100px;
width: 100%;
position: relative;
margin-top: 0px;
margin-left: 0px;}
#main{
background-color: #0000FF;
height: 300px;
width: 80%;
position: relative;
margin-top: 0px;
margin-left: 0px;
float: left;
margin: 0px;} #sidebar{ background-color: #FFEE00; height: 300px; width: 20%; position: relative; margin-top: 0px; margin-left: 0px; float: right; margin: 0px; } #footer{ background-color: #FF3333; height: 50px; width: 100%; position: relative; margin-top: 0px; margin-left: 0px; float: left; } body{ margin-top: 0px; margin-left: 0px; margin-right: 0px; } .text { padding-top: 10px; padding-bottom: 10px; padding-left: 50px; padding-right: 50px; }
</style>
</head>
<body>
<div id="container">
<div id="header"><div class="text">test header</div></div>
<div id="main"><div class="text">test maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest maintest main</div></div>
<div id="sidebar"><div class="text">test sidebar</div></div>
<div id="footer"><div class="text">test footer</div></div>
</div>
</body>
</html>
-
Ciao Luca1988,
io non vedo nessun errore ne spazio bianco con nessun Browser da te elencato.
Potresti farci vedere anche un'immagine tramite "stamp"?
-
certo, questa è a dimensione normale
h**p://img442.imageshack.us/img442/3153/img1f.png
e qui un ingrandimento con un cerchio che segna l'errore
h**p://img40.imageshack.us/img40/1731/img2co.png
ho modificato un po' l'header ma il problema è sempre lo stesso
-
Mmhhh molto strano,
però io almeno apparentemente l'ho risolto impostando il sidebar su "float:left;" anzichè right.Fammi sapere