100% bir divin yanına aynı satırda pixel width i olan bir div getirilmesi

JacopKane · 08.01.2008

Merhabalar,

HTML Code:

<!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=iso-8859-9" />
<title>test</title>
<style type="text/CSS">
<!--
body{
	background:black;
	margin:0 auto;
}
div#id1 {
	width: 100%;
	float:left;
	clear:left;
	background:red;
	height:100px;
}
div#id2 {
	width: 100px;
	float:right;
	clear:right;
	background:blue;
	height:100px;
	display:inline;
}
div#id3 {
	width:100%;
	background:#FFFF00;
	float:left;
	clear:left;
	height:100px;
	display:inline;
}
-->
</style>
</head>

<body>

<div id="id1">
	<div id="id3"></div>
	<div id="id2">asdsad</div>
</div>

</body>
</HTML>

bu kodta bir 100% width div içerisinde (bu olmasada olur bir div) float left ve right edilmiş iki div koydum.Birisinin 100% width i diğerisinin 100px width i var.Amacım diğer div yani 100px olandan nekadar yer kalıyosa orayı 100% olana otomatik doldurtabilmek.
Firefoxta 100% olan, 100px olanı aşağı satıra atıyor,explorerda ise aynı satırda gösteriyor ama scroll atarak sayfa enine genişletipte koyuyor yanına.

100% - 100px gibi birşeyler yapmam lazım yoksa tamamen başka margin yöntemiyle vs. nasıl olacak bilmiyorum ama kafam basmadı.Yardımlarınız için teşekkürler şimdiden

JacopKane · 08.01.2008

HTML Code:

!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=iso-8859-9" />
<title>test</title>
<style type="text/CSS">
<!--
body{
	background:black;
	margin:0 auto;
	overflow-x:hidden;
}
#id2 {
	width: 100px;
	float:right;
	clear:right;
	background:blue;
	height:100px;
}
#id3 {
	width:100%;
	background:#FFFF00;
	float:left;
	clear:left;
	height:100px;
	padding:0 100px 0 0;
}
-->
</style>
</head>

<body>

	<div id="id3">
    	<div id="id2"></div>
    </div>
</body>
</HTML>

birde böyle bir deneme yaptım.Görünüşte iki browserdada oldu ama epeyce nasıl desem,lamer tarzı gereksiz bir deneme oldu.Çözemedim gene problemi.

s5prin · 08.01.2008

Sağ taraftaki float right olan kutucuk HTML kodunda önce gelmeli. Başka floatlara gerek yok;

HTML Code:

<!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=iso-8859-9" />
<title>test</title>
<style type="text/CSS">
<!--
body{
	background:black;
	margin:0 auto;
}
div#id1 {
	background:red;
	height: 100px;
}
div#id2 {
	background:blue;
	height:100px;
	width: 100px;
	float: right;
}
-->
</style>
</head>
<body>
<div id="id1">
  <div id="id2">asd asd asd asd </div>
  asdasd asdas dadaa sd asds asddasda sdasda sdas
  asdas dasd asd a
  das dsa 
  asdsadasdasdas dasd asd asd asdasd fdsf sdf sdfsd fsd fs</div>
</body>
</HTML>

JacopKane · 08.01.2008

Alıntı:

s5prin tarafından gönderilen mesaj:

Sağ taraftaki float right olan kutucuk HTML kodunda önce gelmeli. Başka floatlara gerek yok;

HTML Code:

<!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=iso-8859-9" />
<title>test</title>
<style type="text/CSS">
<!--
body{
	background:black;
	margin:0 auto;
}
div#id1 {
	background:red;
	height: 100px;
}
div#id2 {
	background:blue;
	height:100px;
	width: 100px;
	float: right;
}
-->
</style>
</head>
<body>
<div id="id1">
  <div id="id2">asd asd asd asd </div>
  asdasd asdas dadaa sd asds asddasda sdasda sdas
  asdas dasd asd a
  das dsa 
  asdsadasdasdas dasd asd asd asdasd fdsf sdf sdfsd fsd fs</div>
</body>
</HTML>

çok teşekkürler

08.01.2008	#1 (permalink)
JacopKane Üyelik Tarihi: 23.03.2007 Yer: istanbul Mesaj: 7	100% bir divin yanına aynı satırda pixel width i olan bir div getirilmesi Merhabalar, HTML Code: <!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=iso-8859-9" /> <title>test</title> <style type="text/CSS"> <!-- body{ background:black; margin:0 auto; } div#id1 { width: 100%; float:left; clear:left; background:red; height:100px; } div#id2 { width: 100px; float:right; clear:right; background:blue; height:100px; display:inline; } div#id3 { width:100%; background:#FFFF00; float:left; clear:left; height:100px; display:inline; } --> </style> </head> <body> <div id="id1"> <div id="id3"></div> <div id="id2">asdsad</div> </div> </body> </HTML> bu kodta bir 100% width div içerisinde (bu olmasada olur bir div) float left ve right edilmiş iki div koydum.Birisinin 100% width i diğerisinin 100px width i var.Amacım diğer div yani 100px olandan nekadar yer kalıyosa orayı 100% olana otomatik doldurtabilmek. Firefoxta 100% olan, 100px olanı aşağı satıra atıyor,explorerda ise aynı satırda gösteriyor ama scroll atarak sayfa enine genişletipte koyuyor yanına. 100% - 100px gibi birşeyler yapmam lazım yoksa tamamen başka margin yöntemiyle vs. nasıl olacak bilmiyorum ama kafam basmadı.Yardımlarınız için teşekkürler şimdiden