✔ clear / float Problem

F

fanste

Erfahrenes Mitglied
Hallo,

ich bin gerade dabei, ein Joomla-Template zu erstellen. Die Umsetzung an für sich ist kein Problem. Der Header, die zwei mittleren Spalten (Navi links und Inhalt), sowie der Footer sind da, wo sie sein sollen. Also ein ganz normales CSS-Layout auf float-Basis, wie man es überall finden kann.

Wenn ich nun aber im Inhalts-Div ebenfalls mit float arbeite, kommt es zu den Problemen. Damit die Darstellung richtig funktioniert ist es ja nötig, dass man ge-float-ete Elemente mit clear wieder "zurechrückt".
Da bei mir jedoch schon die Navi mit float:left ausgerichtet ist, will mir der Browser bei einem clear:left den im Inhalts-Div ge-float-ete Div auf die Höhe der Navi ausweiten.

Seh ich das richtig, dass im Firefox (IE6 machts mit und ohne clear richtig) ein clear:left alle "offenen" float:left wieder aufhebt und sich nicht nur auf den Div beschränkt, nachdem das clear gesetzt ist?

Im Anhang habe ich mal noch ein Screen angehängt. Um den HTML-/CSS-Code rauszusuchen fehlen mir grad die Nerven (ich sitz seit 3h dran um von einem hässlichen css-Code mit diesem Problem auf einen schönen mit gleicher Wirkung zu landen -.-).
Sollte es dennoch nötig sein, werde ich mich dran setzten, sobald die Lust wieder da ist.

Danke schonmal.
 

Anhänge

  • Bildschirmfoto4.jpg
    Bildschirmfoto4.jpg
    108,3 KB · Aufrufe: 48
Hi,

besitzt der rechte Spaltenblock eine float-Deklaration?

Möglicherweise kann dir hier der Thread Text umfließt Bild weiterhelfen, in dessen Verlauf dieses Fehlverhalten ebenfalls aufgetreten ist, und von mir anstelle der zunächst empfohlenen clear-Eigenschaft mittels overflow:hidden für den umschliessenden Block gelöst wurde.

mfg Maik
 
Die Antwort, die mit der Mail (hast du deinen Post bearbeitet oder stimmt da etwas nicht?) kam, brachte den rettenden Hinweis. Ich hatte nicht beachtet, dass es ein Layout mit fixer Breite ist. Ich hab das ganze so aufgebaut wie eines mit flexibler Breite (Navi gefloatet und das andere nur mit margin-left angepasst).
Mit einer Breitenangabe sowie float klappt das ganze wunderbar - zumindest bei diesem hier.

Ich werde mir deinen Link in dem Post dennoch mla zu gemüte führen, denn irgendwie muss es ja auch für Layouts mit flexibler Breite gehen.

Danke :) (2h in den Wind geschossen :-P )

Falls noch jemand einen Tipp hat, wie es auch mit einem flexiblen geht, nur her damit, falls ich oder ein anderer mal wieder vor so einem Problem steht.

€dit: Link kann ich keinen Posten, da das ganze hinter Verschluss steht - sprich Passwortgeschützer Bereich...
 
Zuletzt bearbeitet:
Gut, dass es per eMail geschikct wurde :-P

Danke für den Link. Da müsste ich mal testen (frühestens morgen^^) was passiert, wenn man dort noch Elemente mit float verwendet, die im "Contentbereich" angezeigt werden sollen. Ich schätze mal, dass die, wenn sie zu weit unten sind, unter der Navi weiter laufen. Und wenn man noch ein zusätzliches Div dazunimmt, welcher als Conatiner dienen soll, damit sie nicht unter die Navi gehen, steht man warscheinlich wieder vor dem gleichen Problem.
 
Ich hatte jetzt keine Probleme, einen rechten Spaltenblock (#content) einzurichten, und darin weitere Floats unterzubringen - alles nur eine Frage der Technik.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clearing Floats - Example 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div {border:1px solid #000;}
body {
        background-color:#777733;
        font-family:Georgia, "Times New Roman", Times, serif;
}
h1 {
        color:#D6D6C2;
}
#inner {
        width:26%;
        float:left;
        padding-bottom:15px;
        background:#B4B48F url(/examples/clearing_floats/tile.jpg);
}
#outer {
        background-color:#fff;
        overflow:hidden;
        padding-bottom:0px;
        width:100%;
        -moz-border-radius: 0 0 15px 0;
}

#footer {
        clear:both;
        background-color:#223300;
        border:4px solid #D6D6C2;
        color:#D6D6C2;
        -moz-border-radius: 15px 0 15px 0;
        padding:0px 10px
}
#inner *, #outer p {
margin: 5px 5px 5px 10px;
}
kbd {
        display:block;
        background:#fafaff;
        border:1px solid #b0c0d0;
        text-indent:0px
}
kbd:first-line {
        color:#CC33CC;
        font-weight:bold;
        text-indent:20px
}
strong {color:red}


#content { margin-left:27%; }
.wrapper {
border:1px dashed silver;
overflow:hidden;
margin:10px;
}
* html .wrapper {
height:1%;
overflow:visible;
}
.wrapper h2 {
margin:0;
}
.wrapper img {
float:right;
width:300px;
height:100px;
}
</style>

<script type="text/javascript">
// <![CDATA[
/* Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ */
function toggleContent(name,n) {
        var i,t='',el = document.getElementById(name);
        if (!el.origCont) el.origCont = el.innerHTML;

        for (i=0;i<n;i++) t += el.origCont;
        el.innerHTML = t;
        }

// ]]>
</script>
</head>

<body>
<h1>Clearing Floats - Example 2 </h1>
<div id="outer">
     <div id="inner">
          <h3>Inner DIV </h3>
          <p>You can make this column:</p>
          <ul id="lccont">
              <li><a href="javascript:toggleContent('lccont',1)">short</a></li>
              <li><a href="javascript:toggleContent('lccont',5)">longer</a></li>
              <li><a href="javascript:toggleContent('lccont',10)">very long</a></li>
          </ul>
     </div>
     <div id="content">
          <h3>Outer DIV </h3>
          <div class="wrapper">
               <h2>Überschrift</h2>
               <p>
                  <img src="./grafik.png" alt="" />
                  foobar - foobar - foobar - foobar 
               </p>
          </div>
          <div class="wrapper">
               <h2>Überschrift</h2>
               <p>
                  <img src="./grafik.png" alt="" />
                  foobar - foobar - foobar - foobar 
               </p>
          </div>
          <div class="wrapper">
               <h2>Überschrift</h2>
               <p>
                  <img src="./grafik.png" alt="" />
                  foobar - foobar - foobar - foobar 
               </p>
          </div>
          <div class="wrapper">
               <h2>Überschrift</h2>
               <p>
                  <img src="./grafik.png" alt="" />
                  foobar - foobar - foobar - foobar 
               </p>
          </div>

          <p>You can make this column <a href="javascript:toggleContent('mccont',1)">short</a>, <a href="javascript:toggleContent('mccont',10)">longer</a> or <a href="javascript:toggleContent('mccont',40)">very
                    long</a>.</p>
          <p id="mccont">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 tatio </p>

     </div><!-- / #content -->
</div>
<div id="footer">
     <p>Cleared content 'clear:both'</p>
</div>
<p> From <a href="http://www.sitepoint.com/blog-post-view.php?id=238086">SitePoint's Pixel Perfect Blog</a></p>
</body>
</html>


mfg Maik
 
Ahhhh!! "overflow" ist hier das geheimnis.. sobald ich hier wieder mit dem clearfix arbeite, hab ich wieder das gleiche Problem.

Ich hatte es ja noch nicht getestet, wollte ich eigentlich erst morgen machen, nun haste mich aber doch mehr oder weniger dazu gezwungen (Neugierde) :-P

Damit hat sich das endlich geklärt. Danke !!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück