HTML / CSS - Problema con DIV affiancati

Forum - HTML / CSS - Problema con DIV affiancati

jack92 (Member)
Pro

Messaggi: 100
Iscritto: 06/08/2010

Postato alle 15:01
Mercoledì, 10/08/2011

Ciao a tutti. Oggi stavo progettando una piccola pagina html e ho riscontrato delle difficoltà nel impostare un layout.
La pagina l'ho strutturata in questo modo:

Codice sorgente - presumibilmente HTML

...
<body>
      <div id="header" style="border: solid 1px black;">
          ....
      </div>
      <div id="menu" style="float: left; border: solid 1px red;">
          ....
     </div>
     <div id="corpo" style="border: solid 1px green;">
         ....
     </div>
     <div id="footer">
         ...
    </div>
</body>
...

Ora con un browser come safari o firefox, ho problemi nella visualizzazione del div "corpo"... risulta come se il div "menu" fosse contenuto nel div corpo :noway:

mentre se apro la pagina con IE , riesco a visualizzarla come volevo. Che cosa ho sbagliato?

netarrow (Admin)
Guru^2

Messaggi: 2502
Iscritto: 12/05/2004

Postato alle 22:36
Mercoledì, 10/08/2011

Attenziona che se qualcosa la vedi giusta solo con IE, spesso è volentieri sta funzionando tutto solo per miracolo

Questo è un esempio che segue il layout che vuoi tu.

Codice sorgente - presumibilmente HTML / CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        
        <style type="text/css">
            
            body {
                margin: 0px;
            }
            
            #main {
                margin: auto;
                margin-top: 0px;
                width: 900px;
                background-color: black;
                min-height: 550px;
                padding: 5px;
            }
            
            #header {
                background-color: red;
                min-height: 100px;
            }
            
            #container {
                float: left;
            }
            
            #menu {
                float: left;
                width: 200px;
                min-height: 390px;
                background-color: blue;
                margin-top: 5px;
            }
            
            #corpo {
                width: 695px;
                background-color: green;
                min-height: 390px;
                margin-left: 205px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            
            #footer {
                width: 900px;
                background-color: yellow;
                clear: both;
                height: 60px;
            }
            
        </style>
        
    </head>
<body>
     <div id="main">
       <div id="header">
       </div>
         
        <div id="container">
          <div id="menu">
          </div>
       
          <div id="corpo">
          </div>
        </div>
         
            
       <div id="footer">
       </div>
         
    </div>
</body>
</html>

Considera che questo esempio è un layout fixed, quindi anche se funziona sui più diffusi browser non si adatta alle dimensioni della finestra e non scala alle dimensioni del testo.

Se ti interessano anche queste caratteristiche cerca informazioni sui layout liquidi e i layout elastici.