✔ float:right und float:left Probleme

[xGutaxJungex]

Hallo,
Hier erst mal mein Code:

    echo '
<div id="archivebildetc">
<div id="archive"><a href="/galerie/'.htmlspecialchars( $galerie['setbild']).'">
             <img src="/galerie/'.$galerie['setbild'].'" alt="Bild wird geladen." width="200" height="200" /></a></div>
     <div id="archiven" style="width: 400px;">
           <div style="width: 400px;"><b>Titel:</b> '.htmlspecialchars( $galerie['titel']).'</div>
           <div style="width: 400px;"><b>Autor:</b> <a href="index.php?page=10&id='.$userdata['id'].'" target="_blank">'.htmlspecialchars( $galerie['autor']).'</a></div>
           <div style="width: 400px;"><b>Beschreibung zum Bild:</b> '.htmlspecialchars( $galerie['beschreibung']).'</div>
           </div>
</div>
<br>';

  #archivebildetc {
  width: 669px; 
  overflow: hidden;
  }
  
  #archive {
  width: 204px;
  color: #ffffff;
  background-color: #444444;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  border: 2px solid #000000;
  }
  #archive img {
  border: 2px solid #9E9E9E;
  color: #fff;
  }
  #archive a:hover img {
  border: 2px solid #fff;
  color: #fff;
  }
  #archive a:hover { color: #fff; }

  #archiven {
  color: #ffffff;
  float: right;
  background-color: #444444;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  border: 2px solid #000000;
  }

Mein Problem ist jetzt, dass er die beiden Divs, die oben sind nicht nebeneinander tut, sondern unter einander, bei id="archiven" nimmt er das Float: right; raus, aber er zeigt er jedoch trotzdem unter dem id="archive" an :/ . Wieso denn das?

 

[Portugao]

Das

clear:both

in #archive ist die Ursache, denke ich.

 

[Maik]

Hi,

das zu umfliessende Element (mit der float-Eigenschaft formatiert) wird im Markup grundsätzlich an erster Stelle genannt - also in deinem Konstrukt:

<div style="width: 669px; clear: both; overflow: hidden;">
    <div id="archiven">...</div>
    <div id="archive">...</div>
</div>

Desweiteren sorgt die clear:both-Deklaration für #archive dafür, dass das Element in der Zeile darunter ausgerichtet wird.

mfg Maik

 

[xGutaxJungex]

Hab den Code geändert, geht aber noch immer net :/

##EDIT##

Danke, es geht doch , habe ein Float: left; vergessen ^^ .

 

[Maik]

Du hast auch nicht die angesprochene Reihenfolge der beiden genannten DIV-Blöcke getauscht.

mfg Maik

 

[xGutaxJungex]

Wie meinst du das ?

 

[Maik]

Hab ich dir doch eben gezeigt :suspekt:

das zu umfliessende Element (mit der float-Eigenschaft formatiert) wird im Markup grundsätzlich an erster Stelle genannt - also in deinem Konstrukt:

<div style="width: 669px; clear: both; overflow: hidden;">
    <div id="archiven">...</div>
    <div id="archive">...</div>
</div>

mfg Maik

 

[xGutaxJungex]

Achso ^^ , trotzdem danke , es geht ja schon , danke hehe.

Ps:// werde gleich mal meine PHP Frage los :/ .