Tabelle1 rutscht nach unten

taotao2 · #1 (**permalink**) 20.01.2021, 19:38

Hallo,
irgendwas mache ich falsch.
Ich wollte Tabelle1 direkt unter Div1 haben. Das klappt solange die Tabelle1 und Div1 zusammen schmaler sind als der Bildschirm (von der Breite).
Sobald die Tabelle1 und Div1 breiter ist, dann rutscht Tabelle1 unter Div1.
Siehe Bild.

Ich hatte bei Div1 und Tabelle1 unter css "float:left;" eingegeben, aber das hat nicht geholfen.

MrMurphy · #2 (**permalink**) 20.01.2021, 20:37

Ohne den HTML- und CSS-Code ist eine konkrete Hilfe nicht möglich.

Allgemein: float ist für dein Vorhaben weder gedacht noch geeignet. Beschäftige dich mit Flexbox (display: flex) und CSS-Grid (display: grid).

Welche der beiden CSS-Möglichkeiten für deine Seite sinnvoller ist hängt vom Quellcode ab.

Deiner Grafik nach tendiere ich eher zu CSS-Grid. Das ist aber nur nach meinen Erfahrungen geraten.

taotao2 · #3 (**permalink**) 20.01.2021, 23:53

Zitat:

Zitat von MrMurphy

Ohne den HTML- und CSS-Code ist eine konkrete Hilfe nicht möglich.

css:

Code:

#Div1 { float: left }
#Tabelle1 { float: left }

html:

HTML-Code:

<body>
    <div id="Div1"></div>
    <p id="p1">bla</p>
    <div id="Div2"></div>
    <table id="Tabelle1">
       <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
       </tr>
    </table>
</body>

Flexbox (display: flex) und CSS-Grid (display: grid) schaue ich mir mal an

MrMurphy · #4 (**permalink**) 21.01.2021, 01:17

Eine Lösung mit CSS-Grid:

Zunächst musst du die beiden float-Angaben löschen. Und dann das folgende CSS hinzufügen:

Code:

      body {
         display: grid;
         grid-gap: 1rem;
         grid-template-columns: 200px 1fr;
         grid-template-rows: 1fr 1fr 1fr;
         grid-template-areas:
            "div1 p1"
            "div1 div2"
            "div1 tabelle1"
         ;
      }
      #Div1 { 
        grid-area: div1; 
      } 
      #p1 { 
        grid-area: p1; 
      } 
      #Div2 { 
        grid-area: div2; 
      } 
      #Tabelle1 { 
        grid-area: tabelle1; 
      }

cloned · #5 (**permalink**) 21.01.2021, 09:28

Was MrMurphy sagt. Zusätzliche kleine Ergänzung:

Es heißt mittlerweile nicht mehr grid-gap sondern nur noch gap (und kann auch bei zB flexbox angewandt werden)

taotao2 · #6 (**permalink**) 21.01.2021, 12:14

Vielen Dank, ich schau mir das mal an.
Als ich vor 10 Jahren in HTML und CSS intensiver was gemacht hatte, gab es noch kein flexbox oder css-grid. Da musste man das mit float lösen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3-spaltiges Layout: Mittlere Box rutscht immer hoch	dowhile	CSS	2	07.06.2012 16:59
Navigation rutscht heraus	Muamicus	CSS	19	04.01.2011 20:04
Inhalt rutscht unter Navigationsleiste	Blackcherity	CSS	2	03.06.2009 12:17
Inhalt des Footers rutscht weg	Ninerian	CSS	4	23.03.2009 12:42
IE: div-Box rutscht in die Fußzeile	mux	CSS	12	06.11.2008 21:59