Probleme mit 3 divs nebeneinander

[beda2806]

Hallo Leute!

bin noch neu in diesem Forum und daher weiß i jetzt leider noch nicht ob es dieses Thema bereits gab!
Mein Problem zu dem Titel befindet sich auf dieser Website:
Musikverein_Nußdorf

Ich würde gerne diese drei Bilder nebeneinander anzeigen lassen! Leider ist es mir nicht ganz möglich und ich weiß nun keinen weiteren Weg mehr!

Könnte mir jemand helfen?

Mit freundlichen Grüßen
beda2806

 

[Cheffchen]

Hallo,

du suchst bestimmt css float:left oder float:right.
Bei #links hast das ja schon gemacht, mach das mal bei den Anderen beiden auch und seitze die breite bei allen drei 300px und dann mal schauen.

Cheffchen

 

[beda2806]

Hallo Cheffchen,

Hier ist ein Ausschnitt miener CSS datei und meiner html datei

css:

/*Container Ausrichtung*/
.links  {
    width:300px;
    float: left;
           }
.mitte  {
    width:300px;
    margin-left: auto;
    margin-right: auto;
        }
.rechts  {
    width:300px;
    float: right;
        }

html:

<!-- Links -->
  <div class="links">                                                                                                                                    
            <a href="http://www.ooe-bv.at/" target="_blank">
              <img class="link" src="/images/links/ooebv.gif" alt="Ober&ouml;sterreichischer Blasmusikverband">
            <br>Ober&ouml;sterreichischer Blasmusikverband
            </a>
  </div>
  <div class="mitte">
            <a href="http://www.musikverein-nussdorf.de/" target="_blank">
              <img class="link" src="/images/links/mvboden.gif" alt="Nu&szlig;dorf am Bodensee">
            <br>Musikverien Nu&szlig;dorf am Bodensee
            </a>
  </div>
  <div class="rechts">
            <a href="http://www.attersee.at/" target="_blank">
              <img class="link" src="/images/links/attersee.gif" alt="Attersee-Urlaubsparadies">
            <br>Attersee-Urlaubsparadies
            </a>
  </div>

Habe ich irgendwtwas übersehen?

GLG

 

[threadi]

Verschieb den Bereich der "mitte" hinter "rechts" im HTML-Code.

 

[beda2806]

Danke threadi,

So sieht es aus wie ich es eigentlich wollte! Kannst du mir auch noch erklären warum ich die Mitte als letztes coden muss?

 

[threadi]

Wenn Du ein Element floatest, so dass der umgebende Text rechts um das Element fließt, dann sieht es in der Ausgabe so aus:

FLOATLINKS Text Text
Text Text

und im Quellcode steht FLOATLINKS vor allem anderen.

Wenn Du ein Element floatest, so dass der umgebende Text links um das Element fließt, dann sieht es in der Ausgabe so aus:

Text Text FLOATRECHTS 
Text Text

und im Quellcode steht FLOATRECHTS vor allem anderen.

Wenn man nun links und rechts gleichzeitig floatet, dann neben die beiden floatenden Elemente die äußerste Position ihrer jeweiligen Richtung ein. Also:

FLOATLINKS [hier kann dann viel Platz sein] FLOATRECHTS

Wenn Du nun dazwischen noch etwas unterbringen willst, musst Du dieses nach den floatenden Elementen positionieren weil es ja von beiden Seiten umflossen werden soll.

Hoffe das war verständlich. Wenn nicht:
CSS Positionieren
Float: Die Theorie

 

[beda2806]

Ja war so weit eigentlich verständlich!
nur die Theorie werde ich trotztem durchkauen!
kann man ja immer brauchen.
Danke noch mals für die schnelle Hilfe.

 

[struppi]

Einfacher wäre es, wenn du alle drei Element mit float:left nebeneinander stellst. Das DIV Element ist dafür überflüssig, du kannst auch die drei Linkelemente floaten.

Sinnvoll wäre es auch, wenn du die Seite nicht im Quirksmodus darstellen läßt sondern im Standardmodus und gut wäre es, wenn du den drei Elementen nicht feste Breiten geben würdest, sondern relative zum Browserfenster, dann würde es bei mehr Besuchern besser aussehen (ich hab horizontale Scrollbalken auf der Seite).