Antworten auf deine Fragen:
Neues Thema erstellen

CSS: Platzierung zweier DIVs nebeneinander

Biernase

Nicht mehr ganz neu hier

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:
.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:
Code:
<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

webbastler

AW: CSS: Platzierung zweier DIVs nebeneinander

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

Pixelverwender

Guest

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

Nicht mehr ganz neu hier

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.
 

sokie

Mod | Web

AW: CSS: Platzierung zweier DIVs nebeneinander

das Bild kannst du auch ohne <p> im div zentrieren:
Code:
.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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.450
Mitglieder
67.557
Neuestes Mitglied
Charal
Oben