CSS Zwei DIV-Container nebeneinander

ClocxHD · 30. Mai 2015

Hallo,

ich möchte zwei DIV-Container nebeneinander platzieren.
Das sieht aktuell so aus:

HTML-Code:

HTML:

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>Titel</title>
		<?php include 'includes/header.php'; ?>
	</head>
	<body>

<div class="com">
  <div class="com__content pullDown">

    <section class="com__section com__section--text">
      <h1 class="animate slideInLeft ">Rechtliches</h1>
      <div class="recht">
      <div class="impressum">
        <h1>Impressum</h1>
          [B]Text vom ersten DIV[/B]
      </div> 

      <div class="disclaimer">
        <h1>Haftungsausschluss (Disclaimer)</h1>
        [B]Hier ist der Text vom zweiten DIV[/B]
      </div>    
      </div>
    </section>

  </div>
  <?php include 'includes/menu.php'; ?>
</div>

	</body>
</html>

CSS-Code: http://hastebin.com/vufayiduxi.css (Bei hastebin, da sehr lang)

Ich hoffe, ihr lönnt mir helfen.

LG,
ClocxHD

R4sh · 30. Mai 2015

wo sind denn die zwei div container ? ( sry wenn ich falsch liege)

ClocxHD · 30. Mai 2015

Das ist es ja, ich möchte, dass die nebeneinander sind.

Reglohln · 30. Mai 2015

Du musst mit "float" arbeiten.

ClocxHD · 30. Mai 2015

Aaaah, vielen Dank

Reglohln · 30. Mai 2015

Und "clear" nicht vergessen

Bisumaruku · 30. Mai 2015

und mach ma das gruselige iframe da weg

ClocxHD · 30. Mai 2015

Welches iframe?

RageFace · 30. Mai 2015

Bisumaruku schrieb:
und mach ma das gruselige iframe da weg

Das ist kein iframe... einfach mal in den CSS-Code reinschauen. Nicht alles was ein Scrollbalken hat ist gleich ein iframe

Code:

.disclaimer {
  padding-bottom: 20px;
  overflow-y: scroll; 
  z-index: 2;
  float: right;
  margin-top: 0px;
  width: 500px;
  margin-left: 600px;
  height: 300px;
}

ClocxHD · 30. Mai 2015

Foochan · 30. Mai 2015

Reglohln schrieb:
Du musst mit "float" arbeiten.

Oder mit flex box: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Daaron · 30. Mai 2015

- Float: Funktioniert garantiert, macht wenig Probleme, dafür kriegt man ums Verrecken keine Container/Spalten gleicher Höhe hin. Wenn man den folgenden Clearfix vergisst, sucht man außerdem Fehlerursachen wie n bösen Pfennig.
- display:inline-block; funzt ziemlich gut, hat aber einen großen Pferdefuß, der noch dazu schlecht dokumentiert ist: Zwischen den Containern sollte im Code kein Leerzeichen und kein Zeilenumbruch sein, sonst hauen die Breiten nicht hin. </div> <div> wird buggen. </div><div> hingegen nicht.
- display: flex; Ich liebe es, aber man muss vorher mit dem Auftraggeber abklären, ob man IE8-Schlachtvieh etc. unverblümt vor den Kopf stoßen kann. Selbst der Android-Browser unter 4.2 und niedriger macht ordentlich Querelen.
- display: table-row; & display: table-cell; Hey, warum nicht? Zeigt oftmals direkt die erwartete Wirkung.

Kleine Semantik-Mäkelei am Rande:
- Die <section> ist ziemlich fragwürdig. Passender wäre <article>. Siehe auch https://developer.mozilla.org/de/docs/Web/HTML/Element/section
- Von der mehrfachen Verwendung von <h1> wird dringend abgeraten, erst recht in der hier gezeigten Struktur. Mehrere unabhängige <article> einem Dokument, jedes mit ner eigenen <h1>? Kein Problem. Mehrere <section> mit jeweils einer <h1>? Grenzwertig. Eine <section> mit vielen <h1>? definitiv falsch

Suche

CSS Zwei DIV-Container nebeneinander

ClocxHD

Lt. Junior Grade

R4sh

Commander

ClocxHD

Lt. Junior Grade

Reglohln

Captain

ClocxHD

Lt. Junior Grade

Reglohln

Captain

Bisumaruku

Lt. Commander

ClocxHD

Lt. Junior Grade

RageFace

Lt. Junior Grade

ClocxHD

Lt. Junior Grade

Foochan

Ensign Pro

Daaron

Fleet Admiral

Ähnliche Themen