CSS
* {
box-sizing: border-box;
}
.header, .footer {
background-color: #4695E8;
border-radius: 3px;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu ul a{
text-decoration:none;
}
.menu li:hover {
background-color: #0099cc;
}
.content{
width: 75%;
}
Html
<div class="header">
<h1>Kırklareli</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<a href ="#"><li>Tarihi</li></a>
<a href ="#"><li>Doğal Güzellikleri</li></a>
<a href ="#"><li>Yemek Kültürü</li></a>
<a href ="#"><li>Harita</li></a>
</ul>
</div>
<div class="column content">
<h1>Kırklareli Hakkında</h1>
<p>
Kırklareli, Türkiye'nin Marmara Bölgesi'nin Trakya yakasında, doğuda Karadeniz, güneyde Tekirdağ,
batıda Edirne ve kuzeyde Bulgaristan'nın Burgaz ili ile çevrili ilidir.
</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
Çıktı

Tags:

css yön verme
css float right and left
css float right class
css float right left
css float nedir
css float özelliği
css float div
css float right example
css float right position
css clear nedir
css clear code
css clear kullanımı
css float clear kullanımı
css clear link
css clear özelliği
css float left alternative
css float left example
css float left nedir
css float none clear
css div float none
float none in css
css layout clear
css layout float and clear
css layout float clear
css yan yana açılır menü
css yan yana yazma
css image and text side by side
css float examples
css web layout examples
css website layout examples
css for website layout
css web site layout
css float example div
float example in css
css float layout examples