clearfloat

**gavello** · 17-12-2008, 08:43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Styling the footer</title>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container {
margin: 1em auto;
width: 650px;
text-align: left;
background-color: red;
border: 1px solid black;
}
#header {
height: 45px;
background-color: fuchsia;
}
#mainnav {
height: 25px;
background-color: green;
}
#menu {
float: left;
width: 180px;
height: 300px;
background-color: yellow;
}
#contents {
background-color: aqua;
}
#footer {
clear: both;
height: 20px;
background-color: lime;
}
.clearfloat {
clear: both;
}
p img {
float: left;
margin-right: 6px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav"></div>
<div id="menu"></div>
<div id="contents">

[img][/img] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis purus in tellus. Nunc sed mauris bibendum sapien adipiscing tristique. Nunc lectus. Duis nunc. Vivamus non nunc. Morbi eleifend, elit in
<br class="clearfloat">
</p>

[img][/img] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis purus in tellus. Nunc sed mauris bibendum sapien adipiscing tristique. Nunc lectus. Duis nunc. Vivamus non nunc. Morbi eleifend, elit in </p>
<br class="clearfloat">
</div>

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

Qualcuno mi saprebbe spiegare perchè quando imposto .clearfloat viene cancellato non solo il float del DIV IMAGE ma anche quello del DIV MENU?

sembra che il fatto che il DIV IMAGE sia inserito all'interno di un altro DIV (CONTENTS) non sia sufficente per evitare questo... Avete idea di come si risolva la cosa?

CIao e Grazie<br class="clearfloat">

**Mich_** · 17-12-2008, 10:32

Il clear agisce a livello globale, non e` limitato dallo "scope" (permettimi questo paragone con la programmazione). Quindi se inserisci un clear, questo agisce su TUTTI gli elementi definiti a valle.

Pero` i due float (destro e sinistro) possono venir cancellati mediante in modo indipendente.
Pertanto se usi il sinsitro per i blocchi grandi (menu e contents, mi pare), puoi usare il destro per le immagini all'interno dei

, o viceversa.

Esempio:

codice:

<div id="container">
  <div id="header">

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

mainnav</p></div>
  <div id="contents">
    

[img][/img] Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Proin convallis purus in tellus. Nunc sed mauris bibendum sapien 
      adipiscing tristique. Nunc lectus. Duis nunc. Vivamus non nunc. Morbi eleifend, elit in</p>
    

[img][/img] Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Proin convallis purus in tellus. Nunc sed mauris bibendum sapien 
      adipiscing tristique. Nunc lectus. Duis nunc. Vivamus non nunc. Morbi eleifend, elit in </p>
    </div>
  <div id="menu">

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

footer</p></div>
</div>

Nota che ho messo il menu dopo il contents

CSS:

codice:

html, body {
  width: 100%;
  text-align: center;    /* questo serve solo per IE */
}
#container {
  width: 650px;      /* mi pare che vuoi un sito a larghezza fissa centrato enlla finestra */
  margin: 0 auto;    /* questo serve per centrare orizzontale */
  text-align: left;      /* per "dimenticare" il center di cui sopra */
}
#contents {
  width: 460px;
  float: right;
}
#menu {
  width: 180px;
  float: right;
  margin-right: 8px;
}
#footer {
  clear: right;    /* qui si puo` usare anche both, dato che il left e` gia` clearato */
  width: 100%;   /* o qualcosa di simile */
}

#contents p {
  clear: left;
}
#contents img {
  float: left;
}

Naturalmente il mio codice e` una bozza in cui per semplificare ho omesso una serie di altri attributi che tu dovrai pero` inserire.
Nota che ho evitato i
che ti servivano solo per il clear: il clear e` meglio metterlo nei blocchi semantici, oppure in pseudoelementi da inserire tramite CSS, come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float, ed in questo caso non e` necessaria marcatura supplementare.

**gavello** · 17-12-2008, 12:40

grazie! adesso mi è tutto molto più chiaro
Cmq bella fregatira che lavori in globale...

Discussione: clearfloat

Strumenti discussione

Ricerca discussione

Visualizza

clearfloat

Permessi di invio