birkaç tane de ben vereyim:

calc ile hesaplama yapabilirsiniz. mesela:

section  { width:(100% - 200px); }

mesela aside 200px olsun, ana gövdeye de bu genişliği tanımlayabilirsiniz.

genişliğe göre css: mesela ekran genişliği 600px altına düştüğünde uygulanacak cssler buraya yazılır. side bara ve ana tutucuya width:100% verilir ve mobil uyum sağlanmış olur:

@media only screen and (max-width: 600px) {
aside,section{
width:100%;
}
}

aside tag kullanımı: aside sidebar oluyor. section içerisinde aside tagı olabileceği gibi section dışında da (main vs.) olur. yani alanlar için ayrı ayrı aside kullanabilirsiniz.


+ selector'ı kendinden sonraki ilk elementi seçer. örnek:

<section></section>
<aside></aside> <----- hedef
<aside></aside>

section + aside {...}

örnek tooltip:

<div></div>
<span></span>

div + span{
display:none;
}
div:hover + span{
display:block;
}

position olayları: position fixed ekrana sabit atar yani siz ne kadar scrool yapıp farklı yere gitmeye çalışsanızda ekranınızda görmeye devam edersiniz
position absolute tepesindeki en yakında position relative bulunan element içerisinde fixed görevi görür.