XHTMLforum - Tabelle1 rutscht nach unten

XHTMLforum (http://xhtmlforum.de/index.php)

- (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)

- - Tabelle1 rutscht nach unten (http://xhtmlforum.de/showthread.php?t=74179)

taotao2

20.01.2021 18:38

Tabelle1 rutscht nach unten

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.
https://i.ibb.co/wd72krf/bild.gif

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

MrMurphy

20.01.2021 19: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

20.01.2021 22:53

Zitat:

Zitat von MrMurphy (Beitrag 554500)

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

21.01.2021 00: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

21.01.2021 08: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

21.01.2021 11: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. :D

Alle Zeitangaben in WEZ +2. Es ist jetzt 06:15 Uhr.