XHTMLforum - 2 divs neben einander

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - 2 divs neben einander (http://xhtmlforum.de/showthread.php?t=37447)

2 divs neben einander

ich probiere gerade gerade meine page in css um zu coden.

dabei bin ich auf das problem gestoßen ein bild neben einen text zu packen, sodass beide sich direkt neben einander befinden.

ich kann dazu leider kein float:left beim bild benutzen, weil der text nicht unter dem bild weiter gehen soll, wenn er länger ist als das bild.
es soll also so aussehen:
http://henningpohlmeyer.he.funpic.de...n/ebenenmasken

das ganze nur eben in css.

ich bin schon total am verzweifeln und habe inzwischen ziemlichen müll code fabriziert.

hier mein aktueller stand:
http://henningpohlmeyer.he.funpic.de...p/ebenenmasken

das problem was jetzt noch besteht ist, dass wenn der text länger ist als das bild sich mit dem nächsten text überschneidet.

step:

Code:

                                        

                                                <div class="thumbnailcontainer">

                                                        <div class="tutdescription">

                                                                         Ich möchte in diesem Tutorial diese Beiden Bilder fließend in einander übergehen lassen.

                                                        </div>

                                                        <div class="tutimage">

                                                                [img]images/tutorials/photoshop/ebenenmasken/bild1.gif[/img]

                                                        </div>

                                                </div>

css teil:

Code:

div.tutimage {

        width:250px;

        margin:0;

        position:static;

        }



div.tutdescription        {

        left:250px;

        width:250px;

        padding-left:10px;

        text-align:left;

        margin:0;

        position:absolute;

        }



div.thumbnailcontainer {

        width:500px;

        margin:0 auto;

        padding:0;

        clear:both;

        position:relative;

        vertical-align:middle;

        }

kann mir wer helfen?

dem text, den du links od. rechts neben dem bild haben willst halt den entsprechenden margin geben..

ja ich hab ja 2 divs.
in dem einen ist das bild.
und in dem anderen der text.

das ganze ist in nem 500px breiten container.
die beiden divs die drin sind sind beide 250px breit.
beide haben einen margin von 0

wenn sie nun position:static haben sollten beide neben einander angezeigt werden.
jedoch wird nach dem ersten divs ein zeilensprung verursacht und der 2. div wird darunter anstatt daneben angezeigt.
das hat also nichts mit margin zu tun...

nur woran kanns liegen?

Wenn du zwei Divs nebeneinander anordnen willst, brauchst du float:left und nicht position:static! static ist der Initialwert von position, und da Divs Blockelemente sind, werden sie standardmäßig untereinander angezeigt!
Allerdings weiß ich nicht, was das mit deinem Problem, das du am Anfang geschildert hast, zu tun hat...

weil ich den einen inneren div jetzt auf position:absolute gelegt habe.
und das bislang der einzige weg war die beiden divs neben einander zu bekommen.

mit float:left im ersten divs ändert sich sonst nichts und es entsteht immernoch ein absatz nach dem ersten div.

Aah, jetzt kapier ich erst dein Problem. Also erstmal solltest du die absolute Positionierung rausschmeißen! Dann den beiden Divs float:left; geben und im HTML-Code austauschen, weil sonst links die Beschreibung und rechts das Bild angezeigt werden würde, weil die Beschreibung im HTML zuerst kommt.

Das würde dann ungefähr so aussehen:
HTML:

Code:

               

                  <div class="thumbnailcontainer">

                     <div class="tutimage">

                        [img]images/tutorials/photoshop/ebenenmasken/bild1.gif[/img]

                     </div>

                     <div class="tutdescription">

                            Ich möchte in diesem Tutorial diese Beiden Bilder fließend in einander übergehen lassen.

                     </div>

                  </div>

CSS:

Code:

div.tutimage {

   width:250px;

   margin:0;

   float:left;

   }



div.tutdescription   {

   width:240px;

   padding-left:10px;

   text-align:left;

   margin:0;

   float:left;

   }



div.thumbnailcontainer {

   width:500px;

   margin:0 auto;

   padding:0;

   clear:both;

   position:relative;

   vertical-align:middle;

   }

Außerdem darf Width in .tutdescription nur 240px sein, weil das Padding (10px) addiert wird.

Ich hab das so nicht getestet, aber es sollte funktionieren.

vielen vielen dank.
jetzt gehts!

ich wusste nicht das das padding da mit drauf gerechnet wird. das war mein problem.
ich dachte immer das wird dann einfach abgezogen von der gesamtgröße...