Div Katmanı Ve Css Sorunsalı?

şu siteye bak http://www.webders.com/kategori/adobe-dreamweaver/

Biraz daha açıklayıcı olursanız yardımcı olabilirim.

Söyle anlatıyım bir tane div var 300px 300px degerinde
bunu içinde 50px 50px sol üst köseye dayalı bir resim alanı için div var
ben büyük divin içine küçük div katmanı girmicek sekilde yazı yazmak istiyorum büyük div katmanının dışınada taşmıcak sekilde

Dıştaki div'i şu şekilde düzenle.

<div style="padding: 0px;"><img src="space.png" style="width: 50px; height: 50px; align: top left;"/></div>

Arkadasım aradgım sonuc bu degil bunda sorun yok zaten yapamadıgım

div in içine yazılan yazıların cok uzun oldugunda diz dışına cıkması bunu nasıl engelliyebilirim...

Dışta ki büyük div katmanına height:300px; verme. Height değerini kendi otomatik olarak ayarlasın.

overflow:hidden dersen gizler taşanları
overflow:scroll dersen scroolbar çıkartır

height te sorun yok

---------- saat 15:08 eklendi ---------- önceki mesaj saat 15:06 eklenmişti ----------

taşan yazıların bi alt satıra geçmesini saglıyamıyormuyuz peki.. css le

50 px olan kücük div in özelliklerine float:left eklemeyi bi dene eğer olmazsa elimde css ile ilgili döküman var onu gönderebilirim bi ara ...

Sorunun height olmadığına eminmisin?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR"> 
<head> 
<title>Flyco Traingin Solutions-Aviation Training</title> 
<meta http-*****="Content-Type" **********text/html; charset=utf-8" /> 
<style type="text/css">@import "style.css";</style> 

</head> 
<body> 

<div id="kapsa">
<img src="http://www.lipsum.com/images/lipsum07.gif" />



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra aliquet vulputate. Suspendisse laoreet blandit diam quis tristique. Praesent urna nulla, accumsan nec lacinia in, pharetra id erat. Donec condimentum, enim sit amet porta aliquet, nibh risus pretium dui, sit amet commodo felis leo sit amet purus. Pellentesque metus dolor, dapibus id placerat eget, elementum dapibus libero. Mauris a massa ut leo porta ultricies ut at libero. Proin metus mauris, sodales ac lacinia vitae, iaculis nec enim. Curabitur pellentesque consectetur elit, in hendrerit turpis aliquam eu. Nulla sodales sollicitudin arcu sit amet fermentum. Vivamus ac nunc massa. Sed neque quam, pulvinar ac venenatis ut, adipiscing tristique ligula. Vestibulum ac gravida orci. Duis hendrerit enim et erat semper ac iaculis nunc adipiscing. Integer pharetra justo vitae massa semper non fringilla odio iaculis. Cras ac convallis dui.

Nulla imperdiet tristique tempor. In eget urna vel ligula blandit consequat vel a justo. Nam non ante quis nunc imperdiet vestibulum. Aliquam dui mauris, molestie et porttitor id, pretium vel nulla. Praesent at lorem quis diam rhoncus viverra ac ac purus. Integer et elit purus. Cras a sollicitudin nibh. Donec ante velit, ultricies a viverra a, fermentum in nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet egestas urna, a cursus libero ultrices sit amet. Cras et augue dui, at fringilla diam. Donec rutrum libero id magna ultrices sodales. Curabitur eget elit sit amet lectus interdum suscipit.

Suspendisse posuere, magna vel porttitor elementum, felis purus condimentum orci, sed cursus dui libero nec leo. Suspendisse sit amet risus ipsum, at porta felis. Donec condimentum neque ac lorem lobortis sit amet ullamcorper tellus auctor. Morbi at eros nec lacus aliquet ornare a a felis. Nam dapibus accumsan iaculis. Vivamus dolor augue, sodales ac accumsan et, tincidunt ac enim. Quisque est sem, ullamcorper vel semper nec, gravida vitae eros. Donec bibendum gravida lectus, et porttitor dolor pharetra ut. Duis nec dui nunc. Cras in lacus eget erat molestie egestas non id arcu. Nunc vel neque quis velit dapibus adipiscing. Quisque in volutpat enim. Etiam cursus iaculis interdum. Nam tincidunt consectetur elit ut condimentum. Aenean ultrices, urna a eleifend tincidunt, lacus arcu commodo justo, congue porta metus nulla nec tortor. In hac habitasse platea dictumst.

Nam euismod, nisl ut tincidunt pharetra, libero tellus tempor sem, nec mollis ante turpis nec eros. Sed magna justo, tempus a congue quis, vestibulum ullamcorper ipsum. Integer arcu purus, blandit eget interdum sit amet, fringilla vitae diam. Mauris nulla quam, fermentum sit amet feugiat ac, molestie hendrerit lectus. Donec tincidunt, justo eu tempus gravida, enim felis mollis tortor, id tincidunt tortor metus at ipsum. Cras posuere, nibh et interdum commodo, est purus eleifend felis, sit amet tristique elit ante sed erat. Duis sed nunc lorem. Cras felis augue, euismod ut tempor vel, pulvinar ac enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras accumsan sagittis risus et fringilla. Nunc justo neque, hendrerit eu sollicitudin eget, tristique nec tellus. Vestibulum nunc tortor, molestie id molestie eget, accumsan ut lorem. Fusce sed pellentesque quam.

Nulla blandit, augue lacinia ornare gravida, metus mi varius leo, nec adipiscing nunc tortor auctor est. Duis non tortor at sapien malesuada aliquet. Morbi ultricies ipsum mi, vel hendrerit mi. Suspendisse vitae tortor sapien, sit amet pharetra risus. Cras consequat metus at magna congue lobortis. Cras ipsum dui, ullamcorper eu pretium at, pharetra sed massa. Donec ac felis nisi. Sed non leo erat. Sed dignissim lectus convallis erat convallis vitae cursus elit mattis. Nullam varius dictum elementum. Pellentesque mattis facilisis vulputate. Curabitur quis congue lorem.

</div>
 

</body> 
</html>

Css

#kapsa {
width:300px;
background:#ff0000;
margin:0px;
padding:0px;
}
#kapsa img{ float:left;}

Eğer #kapsa sınıfına height:300px; değerini eklersen sorunun ne olduğunu anlarsın.

dostum haklısın ben sana bişey demiyorum senin yaptıgını bende height için yapıyorum ama benim sorunum width te senin gibi yazılar bir alt satıra gecmiyo bende

Neyden kaynaklanıyo olabilir ?

Pardon. Ben sorunun yükseklikte olduğunu düşünmüştüm. Sen html ve css kodlarını buraya eklersen, çözüm bulunabilmesi için daha iyi olur.

----------------------------------------------Css Kodları----------------------------------------------------
.tutorial
{
width:47%;
margin:10px;
float:left;
word-spacing : normal;
text-align : left;
letter-spacing : 0;
line-height :1em;
font-size :.8em;
}
.tutorial-line
{
width:100%;
background:#ffd100;
-moz-border-radius: 1px;
-webkit-border-radius:1px;
height:3px;

}
.tutorial-header
{
height:25px;
text-align:left;
width:100%;
padding:3px;
font-weight:bold;
}

.tutorial-content
{
border:1px solid red;
padding:0;
margin:0;
width:100%;
min-height:175px;

}
.tutorial-picture
{
width:100px;
height:100px;
margin:5px;
border:1px dotted red;
}
.tutorial-footer
{

height:20px;
width:100%;
border:1px dotted red;
}
.tutorial-date
{
height:11px;
width:90px;
font-weight:bold;
text-align:right;
float:right;
margin:5px;
}
.tutorial-date-picture
{
height:11px;
width:11px;
float:left;
background-image:url(images/calendar.gif);
}

---------------------------------------------------------------------------------------------------
Html kodları-------------------------------------------------------------------------------
<div class="tutorial">
<div class="tutorial-line">
</div>
<div class="tutorial-header">
Visual Studio da 2008 de mukemmel code Snippetlar<br />Tıklada oku bakalım
</div>
<div class="tutorial-line">
</div>
<div class="tutorial-content">
<div class="tutorial-picture">
Picture-Here
</div>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Writing anything
</div>
<div class="tutorial-footer">
<div class="tutorial-date">
<div class="tutorial-date-picture"></div>
23.06.1988
</div>
</div>
</div>
-----------------------------------------------------------------------------------------------------------

Bu konularda yeniyim arkadaslar gereksiz yere cok div acmış olabilirim maruz görün

Verdiğin kodları aynen çalıştırdım fakat dediğin gibi birşey olmadı. Ben chrome, ff 4, ve ie 8 de denedim. Bir sorun yok.

burda içerik kısa kalmıs aaaaaaaaaaaaaaaaalı yerler uzatırsan onları aaaaaaaaaaaaaaaaasaaaaaaaaaaaaa diye yeteri kadarı dısarı tasdıgını görüceksin sorunum o...

benim attıgım bu div baska divin içnde oldugundan dahaa kucüktü cunku width degeri yuzdelik yukarıdan direk alırsan sayfaya göre %47 alınca width degeri buyuyo o yuzden yazdıgım iöerik az gelmiş uzatıp bakarsın anlıcaksın bak...

Dediğin gibi yaptım. Uzun bir içerik koydum. %47'lik değeri de 300px'e çektim yine de dediğin gibi olmadı. Herşey normal.