Sayfa Küçülünce Aşağı Kayan Div

<div class="side" style="    float: right;     width: 29%;     box-sizing: border-box;     display: -webkit-box;     display: -webkit-flex;     display: -ms-flexbox;     display: flex;     -webkit-box-orient: vertical;     -webkit-box-direction: normal;     -webkit-flex-direction: column;     -ms-flex-direction: column;     flex-direction: column;     margin: 0 auto;     max-width: 954px;     min-height: 100vh;     padding: 30px;     box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);     background: #fff;     border-radius: 2px;">
<table border="0" cellpadding="{$theme['tablespace']}" cellspacing="{$theme['borderwidth']}" class="tborder" style="width: 100%;">
<tbody><tr>
<td class="thead">
<div class="side-title" style="    border-bottom: 1px dotted #dadada;     position: relative;     box-sizing: inherit;     margin: 0 0 8px;     float: none;     font: normal bold 18px Merriweather;">
Kategoriler
     </div>
<div style="    font: normal normal 12px Merriweather;     line-height: 2;">Türk Tarihi<br>
Osmanlı Tarihi<br>
Siyasi Tarih<br>
Antik Tarih<br>
Modern Tarih<br>
Askeri Tarih<br>
  Ekonomik Tarih</div>
</td>
</tr>
</tbody></table>
</div>

Yukarıda yer alan kod ile bir sidebar oluşturdum, bu kodun sayfa küçülünce aşağı inmesini sağlamak istiyorum. Ancak bir türlü beceremedim.

Not: Sidebar'da yukarıda verilen HTML kodları içine gömülen CSS kodlarından başka CSS kodu yoktur. Sidebar'ın yanında duran kutuda ise şu CSS kodları bulunmakta: 

div#page_body {
    width: 69%;
    float: left;
}

 

Bootsratp ı araştır derim. Orada bütün ekran ölçüleri var. Yani siteyi bootstrap ile tasarladığında tüm ekranlra uyumlu oluyor. Sen sadece tasarlıyorsun. Tek uğşacağın kısım x div mobilde nerede pc de nerede görünsün işini yapıyorsun.

Kısaca Bootstrap işini görebilir.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git