Antworten zum Thema „CSS: Platzierung zweier DIVs nebeneinander“

[Biernase]

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:

.wrapper {
  background: white;
  width: 1000px;
  height: 500px;
  float: left;
  }

.picture {
  background: green;
  float: left;
  width: 50%;
  height: 300px;
  }
  
.description {
  background: yellow;
  float: left;
  width: 50%;
  height:50px;
  font-family: Tahoma, Arial, Geneva, sans-serif;
  font-size: 14px;
	color: #fff;
  text-align: middle;
  }

HTML: Code-Baustein:

<div class="wrapper">
  <div class="picture">
    <p><img src="images/equipment/tent.png" border="0" height="273px" width="390px" alt="Festzelt 4x4"/></p>
  <div>
  <div class="description">
    
  <div>
<div>

<div class="clear"><div>

 

[rest5]

AW: CSS: Platzierung zweier DIVs nebeneinander

Kann es sein, dass die eingefügte Grafik breiter ist, als 50% des Elternelements, also breiter als 500px?

 

[Pixelverwender]

AW: CSS: Platzierung zweier DIVs nebeneinander

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

<div class="wrapper">
<div class="picture">
<img src="images/equipment/tent.png" border="0" height="273px" width="390px" alt="Festzelt 4x4"/>
</div>
<div class="description">
*Inhalt Description-Div*
</div>
</div>

 

[Biernase]

AW: CSS: Platzierung zweier DIVs nebeneinander

Kann es sein, dass die eingefügte Grafik breiter ist, als 50% des Elternelements, also breiter als 500px?

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

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

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.

 

[Pixelverwender]

AW: CSS: Platzierung zweier DIVs nebeneinander

Abgesehen davon, dass Du den <img>-Tag nicht in einen <p>-Tag eingebaut hast, sehe ich da keinen Unterschied.

Das Schließen der div-Container vielleicht?

 

[sokie]

AW: CSS: Platzierung zweier DIVs nebeneinander

das Bild kannst du auch ohne <p> im div zentrieren:

.picture {
  background: green;
  float: left;
  width: 50%;
  height: 300px;
  text-align: center;
  }

das float im Wrapper solltest du schon clearen, bevor du den wrapper schliesst.

 

[Biernase]

AW: CSS: Platzierung zweier DIVs nebeneinander

Das Schließen der div-Container vielleicht?

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