• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Höhe in einem anderen DIV

marspoki

Neues Mitglied
Hallo liebe Leute,

ich bin neue bei HTML und versuche mich gerade mal ein wenig mit DIV und deren Positionierung und Größe.

Jetzt habe ich gedacht das ich mir eine Zeile baue und darin DIVs positioniere. Allerdings hat z.B. Spalte 2 zwei Zeilen. Somit sieht natürlich Spalte 1 nicht schön aus und wird nicht gefüllt.

Hat jamand eine Idee wie ich es schaffe das die einzelnen Salten immer "maximiert angepasst" an das größte DIV dargestellt werden?
Tag soll also angepast an die Spalte 2 sein?

Vielen Dank und viele Grüße
Sebastian

desktop.png
Code:
<!doctype html>
<html>
<head>
    
    <style>
    
        
    .div1{
    float: left;
    width: 988px;
    overflow:hidden;
    border-style: solid;
    border-width: thin;
    border-color: #CFCFCF;
    
        }
        
    .div2{
    margin-left: 5px;
    
    float: left;
    width: 25px;
    display: block;
    
    background-color:brown;
    border-left-style: dashed;
    border-left-width: thin;
    border-left-color: #C8C8C8;
    border-right-style:dashed;
    border-right-width: thin;
    border-right-color: #C8C8C8;
    
        }
        
    .div3{
    margin-left: 5px;
    float: left;
    width: 150px;
    display: block;
    background-color: aqua;
    border-right-style:dashed;
    border-right-width: thin;
    border-right-color: #C8C8C8;
}   
        
    </style>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>

<body>
    
    <div class="div1">
        
    <div class="div2">Tag</div>
    <div class="div3">Zeile1<br>Zeile2</div>   
    
    </div>
</body>
</html>
 
Hallo

kurz Geasgt:
Vergiss float für die (meisten) Positioniereungsaufgaben und ersetze dein float mit display: flex.

Der Grund weshalb die Lösung funktioniert ist, dass display: flex standartmäßig die Eienschaft align-items: stretch mitbringt. Dabei werden alle Flex Items hier vertikal auf die verfügbare höhe gestreckt.

versuche mich gerade mal ein wenig mit DIV und deren Positionierung und Größe.
Dann solltest du dich mit display: flex und display: grid beschäftigen.
float wird heute eingentlich so gut wie nicht mehr verwendet.


Interessante Links zu den Thema:

Flexbox:
MDN - Learn flexbox
css-tricks.com - a guide to flexbox

Grid:
MDN Learn grid
css-tricks.com - complete guide grid
 
Zurück
Oben