elementi fluttuanti <br clear="both"/> in un modo migliore?

Ho alcuni elementi mobili come una barra laterale che galleggiava oltre un'area di contenuto. Se non aggiungo uno <br clear="both"/> alla fine della barra laterale, il piè di pagina e le parti dello sfondo diventano fluttuanti.elementi fluttuanti <br clear="both"/> in un modo migliore?

Qualche soluzione rapida che mi è sfuggita?

Grazie.

Modifica: Ad esempio, desidero che i bordi non presentino spazi vuoti e che gli sfondi non contengano spazi. Dovrebbe basta guardare come due sezioni: 1) il contenuto con la barra laterale 2) footer

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

fonte

2011-01-12 matt

Qual è il tuo codice HTML e CSS per i div? – BoltClock

Buon articolo: http://css-tricks.com/all-about-floats/ – kapa

È possibile impostare gli elementi contenenti la proprietà overflow su un valore diverso da visible.

fonte

2011-01-12 20:32:24 Jim

Vedere anche http://www.quirksmode.org/css/clearing.html – yorick

ha funzionato se ho impostato il div .inner in overflow: hidden! mi chiedo se funziona anche in ie – matt

Si potrebbe solo fare il piè di pagina in modo che abbia uno stile con clear: both.

fonte

2011-01-12 20:29:20 Jacob

Il modo corretto è deselezionare la sinistra e la destra per l'elemento successivo.

Così il piè di pagina si potrebbe aggiungere:

#footer { 
    clear: both; 
}

questo costringerebbe il piè di pagina per scendere alla riga successiva, ed è il modo 'corretto'. Sarà anche più facile cambiare il tuo design in un secondo momento perché non dovrai andare a cambiare markup, solo il CSS.

fonte

2011-01-12 20:32:01

ho modificato il mio post. per favore guarda. come lo risolveresti in questo caso. un semplice chiaro: entrambi non fanno il lavoro ... lo sfondo e il bordo è buggato – matt

display: inline-block; è davvero bello. Peccato che IE in realtà non lo supporta.

fonte

2011-01-12 20:34:57 tdammers

A dire il vero, non proverei a girarlo. Potresti mettere le cose in chiaro come gli altri hanno suggerito; ma non è garantito che altre parti del tuo html non vengano fluttuanti o bloccate in modo errato. Se si adotta una politica di soli elementi di compensazione quando si incasinano a causa di float in una parte casuale del proprio html; potresti prendere l'abitudine di farlo sempre. Al contrario, il seguente è un esempio di uno stile che di solito garantisce che altri elementi non saranno impropriamente galleggiare:

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

Inoltre, vorrei utilizzare un div vuoto invece di br. Questo è solo me.

Quindi disegno dal vostro esempio:

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

fonte

2011-01-12 20:40:55 Dave

elementi fluttuanti <br clear="both"/> in un modo migliore?

risposta

Problemi correlati