Css Flexbox Layout?

Hallo ich möchte folgendes Layout mit Flexboxen umsetzen.

Bild zum Beitrag

Nun zu meinem Problem!

Wie kann ich es schaffen das neben dem Content container der Sidebar container steht? Ich bekomme es einfach nicht hin. Beim mir stehen sie immer untereinander.

Schon einmal danke für euer Antworten!

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

phiLue

25.10.2019, 12:06

Grob zusammengeschrieben, aber passt in etwa wohl so wie du es möchtest.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header style="margin: 1rem; padding: 1rem; border: solid 1px black;">
	<p>Header</p>
</header>
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;">
  <div style="margin: 1rem; padding: 1rem; border: solid 1px black; flex-basis: 2; flex-grow: 2;">
    <p>Content</p>
  </div>
  <div style="margin: 1rem; padding: 1rem; border: solid 1px black;  flex-basis: 1">
    <p>Sidebar</p>
  </div>
</div>
<footer style="margin: 1rem; padding: 1rem; border: solid 1px black;">
	<p>Footer</p>
</footer>
</body>
</html>

Woher ich das weiß:Berufserfahrung

01Basti21

Beitragsersteller

25.10.2019, 12:20

Vielen Dank funktioniert super

verreisterNutzer

25.10.2019, 13:16

Heutzutage gibt es sowohl CSS Grid* als auch Flexbox*, wobei Ersteres eher für solch fixe Layouts geeignet ist.

In Zukunft wäre es empfehlenswert, deine bisherigen Versuche vorzuzeigen.

* Verlinkung der bestes Guides zum Thema.

Woher ich das weiß:Berufserfahrung

BlazedTowel

25.10.2019, 12:10

Habe sowas früher mit der CSS Float-Eigenschaft realisiert.

Woher ich das weiß:Berufserfahrung – Anwendungsentwickler (vorwiegend .NET)

MrStef

25.10.2019, 12:24

float ist tod , es lebe grid und flex ^^ ;-)

TheQ86

25.10.2019, 13:00

@MrStef

tot als Adjektiv wird mit t geschrieben. Tod als Substantiv mit d.

MrStef

25.10.2019, 15:07

@TheQ86

stimmt ;-)

Ähnliche Beiträge

CSS Flex Box 2x2 Layout erzeugen?

Wie bekomme ich mit CSS Flexbox so ein Layout:

...zum Beitrag

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zum Beitrag

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zum Beitrag

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zum Beitrag

Bilder untereinander HTML/ CSS?

Ich habe alles versucht damit die Bilder untereinander gehen aber kriege es nicht hin. Hier sind Bilder wie das aus, von HTML und von CSS. Über Hilfe würde ich mich sehr freuen!

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

...zum Beitrag

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

...zum Beitrag

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zum Beitrag

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

...zum Beitrag

CSS Box erstellen?

Für eine Aufgabe muss ich den gelben Container erstellen. Der grüne und blaue ist bereits erstellt. Wie bekomme ich das hin? Welcher CSS Code wird benötigt😬

...zum Beitrag

text neben bild in css?

Guten Tag,

wie kann ich das in css umsetzen das ich links ein bild hab un rechts daneben text hab(wie in dem bild).

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen