دوستان این طراحی که من کردم میخوام ارتفاع تگهای اخبار سایتم متغیر باشه یعنی متن ازش بیرون نزنه و اگر متن زیاد تر از ارتفاع تگ بود ارتفاع هم به اندازه متن بشه
اما الان نمیشه والا هرچی بلد بودم تست کردم جواب نداد اگر امکانظ هست یه نگاهی بهش بندازید
کد HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrraper">
<div id="head">
<div id="search">
<input name="search" type="text" />
</div>
<div id="menu">
<ul>
<li><a class="menu" href="index.html">صفحه اصلی</a></li>
<li><a class="menu" href="news.html">اخبار</a></li>
<li><a class="menu" href="gallery.html">نمونه کارها</a></li>
<li><a class="menu" href="register.html">عضویت</a></li>
<li><a class="menu" href="shop.html">سفارش</a></li>
<li><a class="menu" href="about us.html" >درباره ما</a></li>
<li><a class="menu"href="contact.html">تماس با ما</a></li>
</ul>
</div>
</div>
<div id="slide"><div><!---pic--></div></div>
<div id="random"></div>
<div id="best">
<div></div>
<div></div>
<div></div>
<!--best news-->
</div>
<div id="content">
<div id="title"></div>
<div id="title1"></div>
<div id="news">
<p>news</p>
</div>
<div id="news2">news</div>
</div>
<div id="footer">abcd</div>
</div>
</body>
</html>
کد HTML:@charset "utf-8";
/* CSS Document */
html,body{
margin:0px;
padding:0px;
}
#wrraper{
margin:0px auto;
width:800px;
height:auto;
min-height:800px;
border:1px solid #000;
}
#head{
background-color:#1C1C1C;
}
/*[start]search*/
#search{
width:auto;
min-width:800px;
height:40pt;
background-color:#393939;
margin-top:0px;
border:1px solid #000000;
}
/*[end]search*/
/*[start]header*/
#menu{
width:auto;
background-color:#E07A25;
height:60pt;
border-radius:15px;
}
ul{
width:auto;
margin:0px;
}
li{
display:inline;
text-align:center;
}
a.menu{
width:50pt;
color:#FFF;
text-decoration:none;
float:right;
line-height:46pt;
direction:ltr;
padding:10px;
}
a.menu:hover{
color:#FFFFFF;
font:bold;
background-color:#282627;
border-radius:12px;
margin-top:10px;
height:30px;
line-height:25px;
}
#slide{
width:800px;
background-color:#1C1C1C;
height:200px;
}
#slide1{
width:450px;
border:1px solid #000;
margin:0px auto;
}
/*[end]header*/
/*[start]best*/
#best{
height:auto;
min-height:180px;
background-color:#F2F2F2;
}
/*[end]best*/
/*[start]random*/
#random{
width:600px;
height:50px;
background-color:#393939;
padding-left:100px;
padding-right:100px;
}
/*[end]random*/
#content{
height:auto;
min-height:200px;
background-color:#FFFFFF;
margin:0px auto;
border:1px solid #000000;
}
#title{
float:left;
width:596px;
height:auto;
min-height:40px;
direction:rtl;
border-bottom:1px solid #CCC;
}
#title1{
float:left;
width:200px;
height:auto;
min-height:40px;
border-bottom:1px solid #CCC;
}
#news{
float:left;
width:560px;
height:auto;
min-height:110px;
padding:20px 20px 20px 20px;
direction:rtl;
}
#news2{
float:left;
top:0px;
width:150px;
height:auto;
min-height:110px;
padding:20px 20px 20px 20px;
background-color:#FFFFFF;
}
/*[end]content*/
/*[start]footer*/
#footer{
width:auto;
min-width:720px;
height:50px;
padding-top:10px;
padding-left:40px;
padding-right:40px;
padding-bottom:10px;
background-color:#CCC;
}
input{
margin-left:600px;
margin-top:10px;
