Anzeige

CSS: Platzierung zweier DIVs nebeneinander

CSS: Platzierung zweier DIVs nebeneinander | PSD-Tutorials.de

Erstellt von Biernase, 29.07.2010.

  1. Biernase

    Biernase Nicht mehr ganz neu hier

    Dabei seit:
    16.10.2005
    Beiträge:
    174
    Geschlecht:
    männlich
    CSS: Platzierung zweier DIVs nebeneinander
    Ich möchte zwei DIVs nebeneinander platzieren.

    Das linke DIV soll eine Grafik enthalten, das rechte DIV eine Beschreibung dazu. Ohne Inhalt werden beide DIVs nebeneinander positioniert. Sobald ich die Grafik in das linke DIV einbette, wird das rechte DIV unter die Grafik verschoben.

    CSS: Code-Baustein:
    Code (Text):
    1. .wrapper {
    2.   background: white;
    3.   width: 1000px;
    4.   height: 500px;
    5.   float: left;
    6.   }
    7.  
    8. .picture {
    9.   background: green;
    10.   float: left;
    11.   width: 50%;
    12.   height: 300px;
    13.   }
    14.  
    15. .description {
    16.   background: yellow;
    17.   float: left;
    18.   width: 50%;
    19.   height:50px;
    20.   font-family: Tahoma, Arial, Geneva, sans-serif;
    21.   font-size: 14px;
    22.     color: #fff;
    23.   text-align: middle;
    24.   }
    HTML: Code-Baustein:
    Code (Text):
    1. <div class="wrapper">
    2.   <div class="picture">
    3.     <p><img src="images/equipment/tent.png" border="0" height="273px" width="390px" alt="Festzelt 4x4"/></p>
    4.   <div>
    5.   <div class="description">
    6.    
    7.   <div>
    8. <div>
    9.  
    10. <div class="clear"><div>
     
    #1      
  2. rest5

    rest5 webbastler

    Dabei seit:
    16.02.2007
    Beiträge:
    301
    Geschlecht:
    männlich
    CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    Kann es sein, dass die eingefügte Grafik breiter ist, als 50% des Elternelements, also breiter als 500px?
     
    #2      
  3. CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    Bevor ich jetzt viel schreibe - so wärs jedenfalls schonmal sauberer:

     
    #3      
  4. Biernase

    Biernase Nicht mehr ganz neu hier

    Dabei seit:
    16.10.2005
    Beiträge:
    174
    Geschlecht:
    männlich
    CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    Nein. Das Elternelement hat eine feste Breite von 1000 Pixel (50% = 500 Pixel), die Grafik ist lediglich 390 Pixel breit.

    Abgesehen davon, dass Du den <img>-Tag nicht in einen <p>-Tag eingebaut hast, sehe ich da keinen Unterschied. Und der <p>-Tag hat den Zweck, das Image im DIV z.B. zentriert ausrichten zu können.
     
    #4      
  5. CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    Das Schließen der div-Container vielleicht?
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    das Bild kannst du auch ohne <p> im div zentrieren:
    Code (Text):
    1.  
    2. .picture {
    3.   background: green;
    4.   float: left;
    5.   width: 50%;
    6.   height: 300px;
    7.   text-align: center;
    8.   }
    9.  
    10.  
    das float im Wrapper solltest du schon clearen, bevor du den wrapper schliesst.
     
    #6      
  7. Biernase

    Biernase Nicht mehr ganz neu hier

    Dabei seit:
    16.10.2005
    Beiträge:
    174
    Geschlecht:
    männlich
    CSS: Platzierung zweier DIVs nebeneinander
    AW: CSS: Platzierung zweier DIVs nebeneinander

    Ja schau einer an. Zig mal kontrolliert, aber das die vermeintlichen "Schließen"-Tags keine waren, fiel mir nicht auf. Danke.
     
    #7      
x
×
×