Css Box auch rechts?

[Cr00sy]

Hallo,

da ich mich nicht mit Css auskenne brauche ich etwas Unterstützung. Ich habe Rechts neben meinem Content eine Box wo Werbung erscheinen soll diese Box möchte ich aber auch Links haben, nur weis ich nicht wie ich das bei Css so anstelle und würde mich sehr freuen wenn mir jemand helfen kann.


Hier ist der Teil aus der CSS

#ad {
        float: left;
        margin-left: 10px;
        padding: 10px;
        width: 180px;
        border: 10px solid #3EA7D0;
        background-color: #FFFFFF;
}

Ausgegeben wird es so:

<div id="ad">Text
</div>

Diese Box möchte ich auch auf der Linken Seite so haben und nicht nur auf der rechten. Wie mache ich das?

Vielen dank!!

 

[Space Vampire]

Diese Box ist doch auf der linken Seite
Egal. Wenn du auf der gegenüberliegenden Seite auch so was haben willst, mach halt float: right;

 

[Cr00sy]

Das ist ja das verwirrende an der ganzen Sache.. Obwohl left dort steht ist diese rechts.. Wenn ich right hinmach ist diese trotzdem rechts :-D .. Hach wie schön..

 

[scbawik]

Du bist verwirrend ;)

Du kannst die Box nicht mit CSS klonen (Ich denke das ist dein vorhaben). Arbeite besser mit Klassen als mit ID's, Beispiel:

.werbung {
margin:10px;
padding:10px;
width:180px;
border: 10px solid #111;
background: #CCC;
}
.left {
float:left;
}
.right {
float:right;
}

HTML:

<div class="werbung left"></div>
<div class="werbung right"></div>

EDIT:
Hab wiedermal alles nur überflogen, ignorier was ich gesagt habe, außer dass Klassen 'besser' sind als ID's.

 

[Bartilo.Heu]

Also ich würde auch zwei verschiedene Klassen machen (werbung1 und werbung2 z.B.) und die eine div rechts floaten und die andere links. Das müsste klappen. Natürlich nur wenn du ein umgebendes div hast (z.B. nen wrapper)

 

[Elroy]

Das müsste klappen. Natürlich nur wenn du ein umgebendes div hast (z.B. nen wrapper)

Und für was braucht er dazu einen wrapper? Damit ein unnötiges div mehr auf der Seite ist?
Ohne geht es genau so gut.

Gruss
Elroy

 

[Tronjer]

Das ist ja das verwirrende an der ganzen Sache.. Obwohl left dort steht ist diese rechts.. Wenn ich right hinmach ist diese trotzdem rechts :-D .. Hach wie schön..

float: left bedeutet: links umfließen. Wenn du zwei Elemente hast, dann steht davon das erste links und das zweite rechts. Bei float: right verhält es sich genau andersherum.

Die Kombination von float: left und float: right hingegen ist ein Sonderfall. So etwas macht man, wenn das eine Element linksbündig und das andere rechtsbündig sein soll.

Im Normalfall verwende einfach float: left.

 

[Elroy]

float: left bedeutet: links umfließen. Wenn du zwei Elemente hast, dann steht davon das erste links und das zweite rechts.

Dann hast du irgend etwas bei float nicht richtig verstanden.

Wenn du zwei div Boxen hast und gibst einer ein float left dann stehen beide genau übereinander.

float: left bedeutet in diesem Fall auf der linken Seite schweben nicht links umfließen.

Gruss
Elroy

 

[Tronjer]

Dann hast du irgend etwas bei float nicht richtig verstanden.

Wenn du zwei div Boxen hast und gibst einer ein float left dann stehen beide genau übereinander.

float: left bedeutet in diesem Fall auf der linken Seite schweben nicht links umfließen.

Gruss
Elroy

Interessant. Also wenn ich so etwas schreibe:

<style>
div {
  float: left;
  width: 100px;
  height: 50px;
  border: 1px solid blue;
}
</style>

<div></div>
<div></div>

dann steht bei mir das erste Div links und das zweite rechts davon. Wie kommst du darauf, dass die übereinander liegen würden? ;)

 

[Elroy]

Gut dann habe ich dich falsch verstanden.

Wenn du zwei div Boxen hast und gibst einer ein float left dann stehen beide genau übereinander.

Wenn du beiden div Boxen ein float left gibst ist das etwas anderes.

Dann stehen beide Boxen nebeneinander. Die Frage war aber wie man eine Links und die andere rechts platzieren kann.

Gruss
Elroy

 

[Tronjer]

Da die zweite Box neben der ersten steht, befindet sie sich rechts, obwohl beide mit float: left positioniert wurden. Interessant wird es erst, wenn man drei Boxen hat und die erste, sagen wir mal 50px vom linken Rand, die zweite in der Mitte der Seite und die dritte 50px vom rechten Rand entfernt sein soll. ;)

 

[Elroy]

Da die zweite Box neben der ersten steht, befindet sie sich rechts, obwohl beide mit float: left positioniert wurden.

Beiden Boxen befnden sich auf der linken Seite und das weisst du auch. Das wird dann Interessant wenn da noch Inhalt zwischen die beiden Boxen soll.

Interessant wird es erst, wenn man drei Boxen hat und die erste, sagen wir mal 50px vom linken Rand, die zweite in der Mitte der Seite und die dritte 50px vom rechten Rand entfernt sein soll.

Also praktisch ein 3-spalten Layout. Box 1 float: left, Box 3 float: right und die zweite ist ja dann automatisch in der Mitte. Ich erkenne da im Moment das Problem nicht.

Da wir hier aber eh keine Einigung erzielen werden lassen wir das lieber bleiben.
Das füht zu nichts und gehört hier nicht mehr her.

Gruss
Elroy