Due div; a sinistra dovrebbe essere risolto larghezza, destra dovrebbe riempire resto dello spazio

Ho il seguente codice HTML:Due div; a sinistra dovrebbe essere risolto larghezza, destra dovrebbe riempire resto dello spazio

<body> 
<div id="Frame"> 

    <div id="Body"> 
     <div id="Panel">Side panel, fixed width.</div> 
     <div id="Content">The rest of the content, should be dynamic width and fill up rest of space horizontally.</div> 
    </div> 

    <div id="Foot"> 
     <div>FooBar.</div> 
    </div> 
</div> 
</body>

Quello che sto cercando di fare è fare in modo che #Panel è di una larghezza fissa (~ 200 pixel) e sul lato sinistro e che #Content si trova immediatamente a destra di #Panel ma è di larghezza "dinamica" e riempie orizzontalmente il resto dello spazio nella schermata del browser. Ho provato un sacco di cose diverse ma non sono riuscito a farlo funzionare - il più lontano che ho ottenuto è al punto in cui #Panel si trova a sinistra e #Content è a destra di #Panel e riempie del resto dello spazio, ma #Content inizia sotto #Panel mentre mi piacerebbe che iniziasse nella stessa posizione verticale.

Ho trovato In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?, tuttavia non è stato possibile applicarlo al codice HTML sopra.

fonte

2010-10-26 CluelessAboutCSS

Ecco che puntano, applicato al codice:

CSS

#frame { background:pink } 
#panel { background:orange; width:200px; float:left } 
#content { background:khaki; margin-left:200px } 
#foot { background:cornflowerblue }

HTML

<div id='frame'> 
    <div id='body'> 

    <div id='panel'> 
     Side panel, fixed width. 
    </div> 

    <div id='content'> 
     The rest of the content, should be dynamic width and fill up rest of space 
     horizontally. 
    </div> 

    </div><!-- End #body --> 

    <div id='foot'> 
    <div>FooBar.</div> 
    </div> 

</div><!-- End #frame -->

funziona piuttosto bene! Sebbene, IMHO, non hai bisogno del telaio o del corpo (ma non conosco il piano generale). Sarebbe come questo:

<div id='panel'> 
    Side panel, fixed width. 
</div> 

<div id='content'> 
    The rest of the content, should be dynamic width and fill up rest of space 
    horizontally. 
</div> 

<div id='foot'> 
    <div>FooBar.</div> 
</div>

fonte

2010-10-27 08:32:53 Ben

+1 questo è l'approccio migliore IMO. Funziona bene anche in IE6. – Mig

Grazie. Sfortunatamente non importa quello che ho fatto, non ero in grado di adattarlo per funzionare correttamente sul mio sito. In ogni modo puoi dare un'occhiata al sito e mostrarmi cosa deve essere fatto (in CSS)? http://www.cpuforums.org – CluelessAboutCSS

@Clueless: ha avuto uno sguardo ed è proprio la stessa cosa. Prova il mio esempio in un test HTML, interrompi/correggi alcune cose e sarai in grado di applicarlo. E, forse sarai in grado di cambiare il tuo nome utente quando hai finito;) – Ben

Due div; a sinistra dovrebbe essere risolto larghezza, destra dovrebbe riempire resto dello spazio

risposta

Problemi correlati