Hallo Leute,
ich habe meine Seite mit 2 Flexboxen gefüllt. Nun würde ich die rechte gern keine statische Größe, sondern vielmehr dynamisch auf den Inhalt anpassen. Zur Zeit sieht man Code so aus:
Was müsste ich ändern? Ich komme grad nicht weiter.
ich habe meine Seite mit 2 Flexboxen gefüllt. Nun würde ich die rechte gern keine statische Größe, sondern vielmehr dynamisch auf den Inhalt anpassen. Zur Zeit sieht man Code so aus:
Was müsste ich ändern? Ich komme grad nicht weiter.
CSS:
body {
background-color: white;
font-family:sans-serif;
margin:0 auto;
max-width: 1024px;
}
.Seite{
background-color:ghostwhite;
margin-top:10px;
margin-bottom:10px;
}
.main{
display:flex;
flex-flow:row;
justify-content:space-between; //gibt an dass im Body alle Flexboxen flexibel sind
}
header{
background-color: silver;
margin-top:20px;
}
header h1{
text-align:center;
margin-top:20px;
}
article{
display:flex;
flex-basis:90%;
background-color: grey;
margin:10px;
padding:10px;
height:700px;
}
nav{
background-color: silver;
margin:10px;
}
aside{
display:flex;
flex-flow:column;
align-items:flex-start;
flex-basis:10%;
background-color:lightskyblue;
margin:10px;
margin-left:20px;
padding:10px;
border-left-style:solid ;
border-left-color: deepskyblue;
border-left-width: 1.5em;
}
aside h4 {
margin-top:0px;
margin-bottom:5px;
}
HTML:
<html><head>
<link href="design.css" rel="stylesheet">
</head>
<body>
<div class="Seite">
<header>
<h1>Tittle</h1>
</header>
<nav>
Navigation
</nav>
<div class="main">
<article>
Hallo<br>
Dies ist ein Tet
</article>
<aside>
<h4>Infobox</h4>
Hier finden Sie die aktuellsten NEWS zu dieser Seite<br>fjfjf
</aside>
</div>
</div>
</body>
</html>
