• User

    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>


  • Super User

    Ciao Luca1988,
    io non vedo nessun errore ne spazio bianco con nessun Browser da te elencato.
    Potresti farci vedere anche un'immagine tramite "stamp"?


  • User

    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 😉


  • Super User

    Mmhhh molto strano,
    però io almeno apparentemente l'ho risolto impostando il sidebar su "float:left;" anzichè right.

    Fammi sapere 🙂