Divs mit float nebeneinander

[UserMitDerFuenf]

Hallo,

wenn ich 2 Divs nebeneinander legen möchte, genügt es scheinbar nicht, wenn mein links zu erscheinender div float: left erhält. Der andere Div soll logischer weise rechts davon sein. Wie bekomme ich das aber trotzdem hin? (Bitte keine absolutes)

_______________________
|________    _________|
|| LEFT |    | RIGHT ||
||______|    |_______||
|_____________________|

Mein Code lautet:

  
   body {  
    background-image: url('./images/themeOne/bgImage.gif');  
    background-repeat: repeat-x;  
    background-color: #1d1d1d;  
    padding: 0px;  
    margin: 0px;  
   }  
  
   #header {  
    background-image: url('./images/themeOne/headerBg.png');  
    background-repeat: repeat-x;  
    width: 80%;  
    height: 142px;  
    margin: 0px;  
    padding: 0px;  
   }  
  
   #headerLeft {  
    padding: 0px;  
    margin: 0px;  
    width: 295px;  
    height: 142px;  
    float: left;  
   }  
  
   #headerRight {  
    padding: 0px;  
    margin: 0px;  
    width: 168px;  
    height: 142px;  
   }  

  
 <div align="center">  
  <div id="header">  
   <div id="headerLeft"><a href="(app_url)" title="Zur Startseite" alt="Just another Website"><img src="{$app_themeOne}header.png" border="0"></a><div>  
   <div id="headerRight"><img src="{$app_themeOne}headerRight.png" alt="none" border="0"></div>  
   <div style="clear:left;"></div>  
  </div>  
 </div>  

[ChrisB]

Hi,

wenn ich 2 Divs nebeneinander legen möchte, genügt es scheinbar nicht, wenn mein links zu erscheinender div float: left erhält. Der andere Div soll logischer weise rechts davon sein.

Doch, das waere er dann, wenn du nichts gegenteiliges mehr erwirkst.

_______________________
|________    _________|
|| LEFT |    | RIGHT ||
||______|    |_______||
|_____________________|

Meinst du vielleicht gar nicht "rechts daneben", sondern nach rechts an den Rand ausgerichtet?

MfG ChrisB

[Autor]

Meinst du vielleicht gar nicht "rechts daneben", sondern nach rechts an den Rand ausgerichtet?

MfG ChrisB

Danke für deine Schnelle Antwort :)

Ich meine tatsächlich am Rechten Rand des Containers angeordnet. Zu diesem Zwecke habe ich die Zweite Box ja rechts neben der Ersten anordnen lassen. Beide mit einer fixen größe und der Platz dazwischen soll halt leer gelassen werden. Wo liegt der Fehler?

[ChrisB]

Hi,

Ich meine tatsächlich am Rechten Rand des Containers angeordnet.

Na also - wieso wer das jetzt wieder so schwer, sich praesize auszudruecken ...?

Zu diesem Zwecke habe ich die Zweite Box ja rechts neben der Ersten anordnen lassen. Beide mit einer fixen größe und der Platz dazwischen soll halt leer gelassen werden. Wo liegt der Fehler?

Darin, dass es bei dem Ansatz kein solches "leer lassen" gibt.

Entweder floatest du das Element auch, nach rechts, dann muss es aber vor dem anderen im Code stehen; oder du floatest nur das erste nach rechts, und laesst das andere mit fester Breite sich dann dem normalen Fluss gehorchend links anschmiegen.

MfG ChrisB

[suit]

<div align="center">
  <div id="header">
   <div id="headerLeft"><a href="(app_url)" title="Zur Startseite" alt="Just another Website"><img src="{$app_themeOne}header.png" border="0"></a><div>
   <div id="headerRight"><img src="{$app_themeOne}headerRight.png" alt="none" border="0"></div>
   <div style="clear:left;"></div>
  </div>
</div>

wie wärs alternativ mit entschlacktem html?

zb

<div id="header">  
  <h1><a href="#">Just another Website</a></h1>  
</div>

ohne dein design gesehen zu haben sollte das eigentlich auch ausreichen um einen header mit dynamischer breiter und hintergrundgrafik zu formatieren