Errore con layout fluido a 2 colonne

**weppos** · 05-08-2007, 12:22

Ho realizzato un template a 2 colonne, composto come segue

1. colonna 180px sinistra
2. seconda colonna, contenuto, riempie il resto

Ho notato uno strano problema che si verifica anche in questo esempio (il mio template non è ancora online).
http://www.services.ex.ac.uk/cmit/mo.../template.html

Se provate al titolo <h1> o ad un qualsiasi contenuto ad aggiungere un clear: both; rivolgendovi ovviamente al contenuto interno, l'intero contenuto della colonna 2 (non la colonna 2!) si allinea alla fine della sidebar!

(vedi immagine)

Avete un suggerimento? Oppure riuscite a fornirmi un esempio per un layout che abbia le medesime caratteristiche sopra riportate (sx fisso Xpx e non % e main fluido, non % ma tutto il rimanente).

**oskaron** · 06-08-2007, 09:05

ciao, non ho notato cio che dicevi ma ti posto una possibile soluzione.

Codice PHP:


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Layout example</title>

<link rel="stylesheet" type="text/css" href="default.css" />

</head>



<body>

<div id="container">

    <div id="header"></div>

       <div id="wrapper">

         <div id="menu"></div>

         <div id="content"></div>

       </div>

    

    <div id="footer"></div>

</div>

</body>

</html>

e il css

Codice PHP:


div#wrapper {

float:left;

width:100%;

}

div#content {

margin-left:200px;

}



}

div#menu {

float:left;

margin-left:-100%;

width:180px;

}

In questo modo metti anche prima i contenuti, spero di esserti stato d'aiuto

**weppos** · 06-08-2007, 09:16

CIao oskaron,

grazie per la risposta.

In questo modo metti anche prima i contenuti, spero di esserti stato d'aiuto

In realtà, a giudicare dall'HTML sembrerebbe di no, prima compare il menù.

Ad ogni modo, ho provato ma mi scombussola ugualmente il layout.
Su firefox scompare totalmente il menu.

**oskaron** · 06-08-2007, 14:11

scusa, scambia il menu con content e riprova, mi ero appena svegliato

**weppos** · 06-08-2007, 15:29

Originariamente inviato da oskaron
scusa, scambia il menu con content e riprova, mi ero appena svegliato

tranquillo, avevo già provato!

Sfortunatamente sembra non adattarsi al mio caso, come detto con FF sballa.

**Sky** · 06-08-2007, 21:20

Puoi posizionare il menù in modo assoluto e togliere il float: left :)

**weppos** · 06-08-2007, 22:29

L'assoluto vorrei evitarlo per altre ragioni (lo so, sono pignolo

)

**oskaron** · 07-08-2007, 00:55

strano però, perchè il layout che ti ho dato lo uso nel mio sito, e comunque lo preso da layout gala. Ti consiglio proprio allora di cercare qui sul network layout gala, e trovi tutti i tipi, magari o sbagliato qualcosa nel copiarlo.

**Sky** · 07-08-2007, 01:03

C'è una soluzione, e l'ha trovata il bravo Alessandro Fulciniti

L'articolo in cui spiega come usare questa tecnica (e molte altre ancora) si trova qui: http://css.html.it/articoli/leggi/583/layout-gala/2/

Applicando un clear: both; a qualsiasi elemento della colonna centrale, facciamo sì che ai suoi lati non possa esserci nulla e non importa se si tratta di layer esterni a quello in cui ci troviamo (come nel tuo caso, ossia clear nel div#navigation e float a div#menu).

Il trucco sta nel posizionare tutto il contenuto dentro un elemento a cui applicare il float. Lo chiamiamo wrapper

codice:

<div id="wrapper">
  <div id="content">
    Qui il contenuto
  </div>
</div>

#wrapper {
  float: left;
  width: 100%;
}

Ora tutta la pagina è occupata dal nuovo layer. Ma con un margine negativo facciamo in modo che il menù si posizioni al suo fianco

codice:

#menu {
  float: left;
  margin-left: -100%;
}

Ora nella sezione centrale possiamo impostare la proprietà clear senza problemi!

Nota bene: nel codice HTML il contenuto deve trovarsi prima del menu

Se poi va inserito un footer (a cui applicare la proprietà clear) impostiamogli una larghezza pari al 100% così che funzioni anche su Internet Explorer.

Nel tuo caso ci vorrebbe una sistemata per visualizzare bene la pagina anche su Internet Explorer 6 (ad occhio direi che dipenda dall'elenco puntato). Buon lavoro!

**weppos** · 07-08-2007, 11:46

sky,
grazie per la risposta.

Il tuo esempio non era esattamente la mia esigenza, ma l'articolo di alessandro è perfetto, ecco la pagina che mi serviva http://css.html.it/articoli/leggi/583/layout-gala/7/

Non volevo rompere le palle via email ad alessandro, ma direttamente o indirettamente mi ha dato la soluzione.

Ho dovuto riadattare un po' la cosa, ma sembra funzionare (pure crossbrowser!).
Grazie ad entrambi per le vostre risposte.

Discussione: Errore con layout fluido a 2 colonne

Strumenti discussione

Ricerca discussione

Visualizza

Errore con layout fluido a 2 colonne

Permessi di invio