Umbruch in Quelltext macht Boxlayout kaputt

[Detlef G.]

Hallo Hendrik

... "padding-left:45px;" versehen ist, sodass zwischen "Foto" und "Logo" genau 45 Pixel Platz ist. Das wiederum hat zur Folge, dass der rechte Rand von "Logo" genau an den Rand vom "hintergrund"-Div grenzt (Denn: 530+45+250 = 825).

Es soll also ganz am rechte Rand sein. Das durch die Addition von Breiten und Abständen von linken Rand aus erreichen zu wollen, wäre mir viel zu gefährlich.

Nun kann ich aber schlecht alle "pixelsensitiven" Boxen und Elemente in eine Zeile schreiben. Und trotzdem wird es eine Möglichkeit geben mein Problem zu umgehen oder gar zu beseitigen. Ich habe im Moment dazu aber keine Idee, was übersehe ich? Hoffe ihr könnt mir dazu ein paar Tipps geben! Forumsuche und Google konnten mir leider nicht weiterhelfen.

XHTML jeweils:

<div id="hintergrund">  
  <img src="button.png" alt="" title="" id="leftheader" />  
  <img src="button.png" alt="" title="" id="rightheader" />  
  <!-- so sollte es funktionieren -->  
  <p>...</p>  
</div>  

Eine Möglichkeit:

#leftheader {  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:]left;  
 width:530px;  
 height:120px;  
}  
#rightheader {  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float:]right;  
 width:250px;  
 height:120px;  
}  
#hintergrund p { /* das erste auf die Headergrafiken folgende Element! */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear:]both;     /* float wieder aufheben */  
}  

Eine andere Möglichkeit:

div#hintergrund {  
 /* ... */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position:]relative;  /* für nachfolgende absolute Positionierung */  
}  
#leftheader {  
 display:block;      /* damit es die komplette Zeile nimmt */  
 width:530px;  
 height:120px;  
}  
#rightheader {  
 position:absolute;  /* und absolut rechts oben positioniert */  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#right@title=right:]0;  
 [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#postop@title=top:]0;  
 width:250px;  
 height:120px;  
}  

Auf Wiederlesen
Detlef