layout fluido, come??

**citrus** · 08-09-2008, 17:45

ciao a tutti,
sto cercando di creare una pagina html con 2 colonne, la prima fissa (200px), la seconda
invece deve essere adattabile alle dimensioni del browser.

ecco il codice html:

codice:

<html>
<body>

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

</body>
</html>

ecco il codice css:

codice:

#container{display:block; width:100%;}
#left{display:block; width: 250px; float:left;}
#right{display:block; width: 100%; float:left;}

sembra tutto semplicissimo eppure non funziona...
il div "right" riempie si tutta la pagina, ma lo fa andando accapo sotto il div "left"!

voi sapete come posso risolvere il problema?
grazie mille
citrus

**fcaldera** · 08-09-2008, 18:30

se ho capito bene, puoi provare con i margini negativi

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        * { margin: 0; padding: 0;}
        
        #cnt { padding-left : 200px; background: #c66; } /* rosso */
        #left { float: left; display: inline;  margin-left: -200px; width: 200px;  background: #6c6;  } /* verde */
        </style>
        
    </head>

<body>


<div id="cnt">

    <div id="left">
        div fisso
    </div>

    


        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
    


        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
</div>


</body>
</html>

**citrus** · 08-09-2008, 19:55

perfetto ho risolto inserendo il div "left" dentro al div "right"...
non ho capito il discorso dei margini negativi ma funziona anche senza usarli...

grazie mille

citrus

**dori88** · 08-09-2008, 20:07

Se invece vuoi lasciare il tuo codice html invariato da come l'hai inserito nel primo post basta togliere display: ovunque l'hai messo.
In conteiner metti overflow:hidden e nella colonna liquida metti margin-left:200px

In questo modo lasci l'html invariato e non hai affatto bisogno di margini negativi

Discussione: layout fluido, come??

Strumenti discussione

Ricerca discussione

Visualizza

layout fluido, come??

Permessi di invio