zwei div boxen nebeneinander und rechts ausrichten

[BastianW]

Hi,

ich möchte zwei div boxen nebeneinander rechts am Bildschirmrand ausrichten

Symbol:
| ()()|

Es gelingt mir aber nicht .

Wie müßte der Quellcode dafür aussehen?

 

[Maik]

Hi,

kurz und schmerzlos:

#box1, #box2 {
float:right;
}

<div id="box1">box 1</div>
<div id="box2">box 2</div>

 

[BastianW]

verdammt... das sieht einfach aus...

wo müßte denn dann das Clear element hin?

Edit:
Bei dem beispiel vertauscht er mit irgendwie die boxen:

| (box2)(box1)|

erwartet hätte ich ja:

| (box1)(box2)|

 

[Maik]

Dann tauscht du eben die Reihenfolge:

<div id="box2">box 2</div>
<div id="box1">box 1</div>
<div style="clear:both;">box 3</div>

Oder du setzt es auf diese Weise um:

#wrap {
float:right;
}
#box1, #box2 {
float:left;
}

<div id="wrap">
     <div id="box1">box 1</div>
     <div id="box2">box 2</div>
</div>
<div style="clear:both;">box 3</div>

 

[BastianW]

hey super... das klappt klasse

Wenn ich das richtig verstehe hält der Wrapper beide Elemente und richtet sie rechts aus oder?

Nur wieso sind die Elemente drinnen auf left ausgerichtet?

Wenn ich nun zwei Boxen erstelle mit je 300px und das Browserfester zusammenschiebe, werden die Boxen irgendwann einmal untereinander dargestellt, kann ich das irgendwie verhindern?

 

[Maik]

Nur wieso sind die Elemente drinnen auf left ausgerichtet?

Damit sie, wie von dir erwartet, in der Reihenfolge angezeigt werden, wie sie im Quellcode notiert sind.

Wenn ich nun zwei Boxen erstelle mit je 300px und das Browserfester zusammenschiebe, werden die Boxen irgendwann einmal untereinander dargestellt, kann ich das irgendwie verhindern?

Indem du für das DIV #wrap eine entsprechende Breite definierst.

 

[BastianW]

Indem du für das DIV #wrap eine entsprechende Breite definierst.

Aha... ok... in meinem Beispiel müßte ich ihm dann eine Breite von 600px zuordnen, da keine Rände in den Elementen, beide aber 300px breit sind?

 

[Maik]

So sieht's aus.