Wie kann ich zwei DIV-Elemente nebeneinander bekommen?

Hallo,

ich wollte eine Internetseite mit HTML erstellen, auf der ich mich im Kopfbereich vorstelle und rechts von mir ein Bild sein soll.

Kann mir jemand helfen, wie ich das hinbekomme? Wie bekomme ich die div-Elemente nebeneinander? Und wie kann ich dem div dann sagen, dass das Bild oben rechts sein soll und in dem anderen div der Text zentriert wird?

2 Antworten

Xandros0506

23.11.2023, 17:05

Wie bekomme ich die divs nebeneinander?

Stichwort CSS -> Float

Wenn der erste DIV-Container mit "float:left" links im Fluß dargestellt wird, werden die nachfolgenden Container rechts daneben positioniert und nicht darunter.

Man sollte nur am Ende des Blocks dieser Container ein "float:root" (z.B. bei einem Zeilenumbruch oder Dergleichen) einfügen, damit der normale Darstellungsfluss wieder aufgenommen wird.

MarlonStrich

Fragesteller

23.11.2023, 17:49

Und Abstand zwischen den beiden Divs? Wie bekomme ich den hin? Mit Margin Right geht es irgendwie nicht

GuteFrageXY13

23.11.2023, 17:55

@MarlonStrich

Ich würde dir empfehlen dich mal über Flexbox zu informieren. Wenn du öfters mit CSS und HTML arbeitest, nimmt dir das viel Arbeit ab. Bei deinem Problem könnte womöglich das gap-property helfen.

gap: 10px;

Willibergi

23.11.2023, 18:20

Das lässt sich wie vieles mit CSS-flexbox lösen. Gib dem umliegenden Element die Eigenschaft display: flex, dann liegen die darin liegenden Elemente nebeneinander. Mit justify-content: space-between erreichst du, dass der Text links und das Bild rechts liegt.

Es lohnt sich, sich einmal gründlich in CSS-flexbox einzulesen, denn damit ist fast jedes Layout möglich.

HTML:

<div class="presentation">
    <div>
      Lorem ipsum.
    </div>
    <div>
      <img src="https://picsum.photos/200">
    </div>
</div>

CSS:

.presentation {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

JSFiddle: https://jsfiddle.net/q5rovebd/

Woher ich das weiß:Berufserfahrung – Software-Entwicklung

MarlonStrich

Fragesteller

23.11.2023, 19:09

Und Abstand zwischen den einzelnen div?

Willibergi

23.11.2023, 19:15

@MarlonStrich

Mit etwa gap: 10px auf dem .presentation-Element bekommst du eine 10px-Lücke zwischen den divs.

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zur Frage

HTML FLEX: Wie bekomme ich ein Label in einem Radiobutton zentriert?

https://jsfiddle.net/dtqjp3zr/

Die Labels sind Teil der Divs und haben 50% Breite. Für das Div klappt das auch, nur der Label-Text selbst will einfach nicht in die Mitte.
Wo ist da mein Denkfehler?

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

Elemente in css schräg übereinander legen?

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zur Frage

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

Wordpress-Internetseite gestallten: Seitenränder hinzufügen?

Sehr gerne hätte ich auf einer Wordpress-Internetseite, welche ich mit dem kostenlosen Baukasten erstellte, einen Rand links und rechts angezeigt, wie beispielsweise hier auf dem Screenshot zu sehen.
Gibt es dafür eine einfache Funktion, welche ich auswählen kann oder benötige ich einen HTML-Befehl? Falls Letzteres zutrifft: Welchen und wo gebe ich ihn ein.
Herzlichen Dank.

...zur Frage

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

...zur Frage

Was kann ich in den HTML Header schreiben, damit der Text in der Website in der Mitte schmal zentriert ist.?

Also, links und recht ein großer Abstand, und nur in der Mitte der Text, höchstens ein Drittel des Bildschirms einnehmend, was muss ich da in die HTML Styles oder so schreiben, danke

...zur Frage

Mehrere Divs nebeneinander ohne Überlappen (HTML)

Hallo Zusammen

Ich würde gerne in meiner Webseite ein Div mit einem Inhalt links der Seite, sowie der Hauptinhalt in einem anderen Div rechts der Seite anzeigen lassen.

Das habe ich soweit auch hingekriegt. Jetzt kommt das Problem:

Bei Verkleinerung des Browserfensters überlappen sich die einzelnen Divs und ich möchte fragen wie man diese dazu zwingt sich nebeneinander einzureihen...

Freue mich auf Ratschläge,

Liebe Grüsse

...zur Frage

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zur Frage

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen