Jump to content

floating is not working properly

jim9

By jim9
in CSS

Recommended Posts

jim9 Newbie

jim9

Posted
Posted

Hi,Could you please tell me why the two red bordered parts are not floated properly. They should appear in the same horizontal level.screenshotmr.pngDemo : http://www.gimp-arabic.com/wp-ar/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" dir="rtl" lang="ar"><head profile="http://gmpg.org/xfn/11">	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<title> تصاميم</title>	<link rel="stylesheet" href="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/style.css" type="text/css" media="screen" />	<link rel="stylesheet" type="text/css" href="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/nivo-slider.css" />	<script src="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/jquery-1.4.2.min.js" type="text/javascript"></script>	<script src="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/jquery.nivo.slider.js" type="text/javascript"></script>	<link rel="pingback" href="http://www.gimp-arabic.com/wp-ar/xmlrpc.php" />		<link rel="alternate" type="application/rss+xml" title="تصاميم » الخلاصة" href="http://www.gimp-arabic.com/wp-ar/?feed=rss2" /><link rel="alternate" type="application/rss+xml" title="تصاميم » خلاصة التعليقات" href="http://www.gimp-arabic.com/wp-ar/?feed=comments-rss2" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.gimp-arabic.com/wp-ar/xmlrpc.php?rsd" /><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.gimp-arabic.com/wp-ar/wp-includes/wlwmanifest.xml" /> <link rel='index' title='تصاميم' href='http://www.gimp-arabic.com/wp-ar' /><link rel="stylesheet" href="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/rtl.css" type="text/css" media="screen" /><meta name="generator" content="WordPress 3.0.1" />	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style></head><body class="rtl home blog logged-in"><div id="shell">		<div id="slide_show">			<div id="slider">				<img src="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/images/slide_show.jpg" alt="" />				<img src="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/images/slide_show1.jpg" alt="" />				<img src="http://www.gimp-arabic.com/wp-ar/wp-content/themes/kis-keep-it-simple/images/slide_show2.jpg" alt="" />			</div>		</div>	<div id="header">		<div class="blog-info">			<h1><a href="http://www.gimp-arabic.com/wp-ar/">تصاميم</a></h1>			<span class="blog-desc">مدونة ووردبريس عربية أخرى</span>		</div>		<div id="navigation" class="nav">			<ul>				<li class="current_page_item"><a href="http://www.gimp-arabic.com/wp-ar/" >Home</a></li>				<li class="page_item page-item-2"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=2" title="سيرة ذاتية">سيرة ذاتية</a></li><li class="page_item page-item-4"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=4" title="صفحة 1">صفحة 1</a></li><li class="page_item page-item-6"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=6" title="صفحة 2">صفحة 2</a></li>			</ul>			<a href="http://www.gimp-arabic.com/wp-ar/?feed=rss" class="rss">Subscribe</a>		</div>		<div class="cl"> </div>	</div>				<div id="main">	<div id="content">						<div class="post box" id="post-1">				<div class="box-t">					<div class="box-b">						<h2><a href="http://www.gimp-arabic.com/wp-ar/?p=1" rel="bookmark" title="Permanent Link to أهلاً بالعالم!">أهلاً بالعالم!</a></h2>						<small class="date">سبتمبر 8th, 2010 <!-- by admin --></small>						<div class="entry">							<p>مرحباً بك في ووردبريس، هذه تدوينتك الأولى، حررها أو احذفها، ثم ابدأ التدوين !</p>						</div>						<div class="post-meta">							<div class="post-meta-b">								<div class="cl"> </div>								<div class="left">									<p>Posted in <a href="http://www.gimp-arabic.com/wp-ar/?cat=1" title="شاهد جميع التدوينات في تصنيف غير مصنف" rel="category">غير مصنف</a></p>																	</div>								<div class="right">									<p><a href="http://www.gimp-arabic.com/wp-ar/?p=1#comments" title="التعليق على أهلاً بالعالم!">1 Comment</a></p>									<!-- <p><a class="post-edit-link" href="http://www.gimp-arabic.com/wp-ar/wp-admin/post.php?post=1&action=edit" title="تحرير التـدوينة">Edit</a></p> -->								</div>																<div class="cl"> </div>							</div>						</div>											</div>				</div>			</div>				<div class="page-nav">			<div class="alignleft"></div>			<div class="alignright"></div>		</div>		</div>	<div id="sidebar">		<ul>						<li style="height: 100%">				<h2>Search</h2>				<ul>					<li class="no-li"><form role="search" method="get" id="searchform" action="http://www.gimp-arabic.com/wp-ar/" >	<div><label class="screen-reader-text" for="s">البحث عن:</label>	<input type="text" value="" name="s" id="s" />	<input type="submit" id="searchsubmit" value="بحث" />	</div>	</form></li>				</ul>				<div class="cl"> </div>			</li>											</ul>		<ul>			<li class="pagenav"><h2>Pages</h2><ul><li class="page_item page-item-2"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=2" title="سيرة ذاتية">سيرة ذاتية</a></li><li class="page_item page-item-4"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=4" title="صفحة 1">صفحة 1</a><ul class='children'>	<li class="page_item page-item-8"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=8" title="صفحة فرعية 1">صفحة فرعية 1</a></li></ul></li><li class="page_item page-item-6"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=6" title="صفحة 2">صفحة 2</a></li></ul></li>			<li><h2>Archives</h2>				<ul>					<li><a href='http://www.gimp-arabic.com/wp-ar/?m=201009' title='سبتمبر 2010'>سبتمبر 2010</a></li>				</ul>			</li>			<li class="categories"><h2>Categories</h2><ul>	<li class="cat-item cat-item-1"><a href="http://www.gimp-arabic.com/wp-ar/?cat=1" title="شاهد جميع التدوينات في تصنيف غير مصنف">غير مصنف</a> (1)</li></ul></li>		</ul>		<ul>							<li id="linkcat-2" class="linkcat"><h2>روابط</h2>	<ul class='xoxo blogroll'><li><a href="http://www.ar-wp.com" title="المعرّب الرسمي لسكربت ووردبريس" target="_blank">عرب ووردبريس</a></li>	</ul></li>				<li><h2>Meta</h2>				<ul>					<li><a href="http://www.gimp-arabic.com/wp-ar/wp-admin/">إدارة الموقع</a></li>					<li><a href="http://www.gimp-arabic.com/wp-ar/wp-login.php?action=logout&_wpnonce=190cedaf2f">تسجيل الخروج</a></li>					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>									</ul>				</li>								</ul>	</div>		<div class="cl"> </div>	</div>	<div id="footer" class="footer_nav">		<ul>			<li class="current_page_item"><a href="http://www.gimp-arabic.com/wp-ar/" >Home</a></li>			<li class="page_item page-item-2"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=2" title="سيرة ذاتية">سيرة ذاتية</a></li><li class="page_item page-item-4"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=4" title="صفحة 1">صفحة 1</a></li><li class="page_item page-item-6"><a href="http://www.gimp-arabic.com/wp-ar/?page_id=6" title="صفحة 2">صفحة 2</a></li>		</ul>		<p class="copy">© 2010 تصاميم. Design by <a href="http://cssmayo.com">.css{mayo}.com</a>, Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a></p>		<div class="cl"> </div>	</div></div></body></html>

CSS

/*Theme Name: K.I.S ( Keep it Simple )Theme URI: http://cssmayo.com/freebies/free-wordpress-themes/kis/Description: Clean lightweight two-column theme suitable for a wide range of bloggers. Sidebar widget ready. Valid CSS & HTMLAuthor: cssmayo.comAuthor URI: http://cssmayo.com/Tags: white, orange, light, two-columns, right-sidebar, fixed-widthVersion: 0.2*/* { padding:0; margin:0; outline:0; }body { background:#efefef; color:#818181; font-family: Verdana, Arial, sans-serif; font-size:12px; line-height:17px; padding-bottom:15px; direction:rtl;}a img { padding:1px; border:solid 1px #ddd;}a:hover img { padding:1px; border:solid 1px #777;}.alignleft, .left { float:right; display:inline; }.alignright, .right { float:left; display:inline; }.aligncenter { display: block; margin-left: auto; margin-right: auto; }.cl { font-size:0; line-height:0; height:0; display:block; clear:both; }a { color:#dc8546; text-decoration: underline; cursor:pointer; }a:hover { color:#333; text-decoration: none; }h1 { font-size:20px; line-height:20px; color:#000; font-family: "Times New Roman", Times, serif; font-weight: normal; padding-top:0px; font-style:italic;}h2 { font-size:22px; color:#000; font-family: "Times New Roman", Times, serif; line-height:27px; font-weight: normal;}h3 { font-size:19px; color:#000; font-family: "Times New Roman", Times, serif; line-height:24px; font-weight: normal;}h1 a, h2 a { color:#000; text-decoration: none; }h1 a:hover, h2 a:hover { color:#dc8546; }#shell { width:962px; margin:0 auto; }#header { margin:0px 0px 10px 0px; padding:0px; border:1px solid #c3c3c3; }#header .blog-info { float:right; white-space:nowrap; text-align:right;padding:2px 30px 0px 10px;font-style:italic; margin:0px; border:0px solid red;}#navigation { float:left; height:42px; width:740px; background:#303030;padding:0px; margin:0px; position:relative; border:0px solid red;}.nav ul { list-style-type: none; font-size:11px; font-family: Verdana, Arial, sans-serif; text-transform: uppercase; margin:0px; padding:13px 5px 0 5px; width:540px; height: 34px; overflow:hidden;}.nav ul li{ display:inline; margin:0px; padding:0 20px 0 20px; white-space:nowrap;border-left:1px solid #c3c3c3;}.nav ul li a{ text-decoration: none; color:#ffffff; }.nav ul li a:hover{ color:#dc8546; }#header .nav ul li.current_page_item a { border-bottom:solid 2px #dc8546; }.rss { position:absolute; top:4px; right:613px; width:119px; height:32px; background:url(images/rss.gif) no-repeat 5px 0px #f6f6f6; font-size:0; line-height:0; border:1px solid #c3c3c3;}#content { float:right; width:601px; padding:0px; margin:0px; border:1px solid red; }#sidebar { float:left; width:354px; border:1px solid red; }#main { padding-bottom:10px;}.box { background:url(images/box-c.gif) repeat-y 0 0; width:100%; margin-bottom:10px;}.box-t { background:url(images/box-t.gif) no-repeat 0 0; width:100%; }.box-b { background:url(images/box-b.gif) no-repeat 0 bottom; height:100%; padding:8px 13px 13px 13px; }#sidebar ul { list-style-type: none; }#sidebar .box { background-image:url(images/sidebar-box-c.gif);}#sidebar .box-b { background-image:url(images/sidebar-box-b.gif);}#sidebar h2 { height:32px; background:url(images/sidebar-h2.gif) no-repeat 0 0; font-size:16px; line-height:30px; padding:0 13px; font-weight: bold; color:}#sidebar ul li { background:url(images/sidebar-box-c.gif) repeat-y 0 0; padding:0; margin-bottom:10px;}#sidebar ul li ul,#sidebar .widget_search div,#sidebar .widget_text .textwidget,#sidebar .widget_calendar #calendar_wrap,#sidebar .widget_tag_cloud div{ background:url(images/sidebar-box-b.gif) no-repeat 0 bottom; padding:8px 13px 13px 13px; }#sidebar ul ul { }#sidebar ul ul li { background:url(images/arr.gif) no-repeat 0 9px; border-bottom:solid 1px #dcdcdc; padding:3px 9px 3px 0px; margin:0;}#sidebar ul ul li a{ color:#333; text-decoration: none; }#sidebar ul ul li a:hover{ color:#dc8546; }#sidebar ul ul ul{ background:transparent; padding:0; }#sidebar ul ul ul li{ border:0; }#sidebar li.no-li { border:0 !important; background:transparent; padding-right:0;}.post { }.post .entry { padding-top:14px; overflow:hidden; }.post .entry p{ padding-bottom:15px; }.post .entry ul,.post .entry ol { padding:0 30px 15px 0px;}.post .entry li { padding-bottom:3px;}.post .entry blockquote { padding-right:45px; background:url(images/quote.gif) no-repeat 5px 5px;}.post .entry table { width:100%; margin-bottom:20px;}.post small.date{ display:block; font-size:10px; }/*.post-meta { font-size:10px; height:24px; background:url(images/post-meta.gif) no-repeat 0 0; color:#fff; position:relative; line-height:22px; width:571px; margin:0 -6px; padding:0 8px; } */.post-meta { font-size:10px; background:#000 url(images/post-meta-t.gif) no-repeat 0 0; color:#fff; position:relative; line-height:14px; width:587px; margin:0 -6px; }.post-meta-b { background:url(images/post-meta-b.gif) no-repeat 0 bottom; height:100%; padding:5px 8px 3px 8px;}.post-meta a{ color:#fff !important; font-weight: bold; }.post-meta .left{ width:465px; }.post-meta .right{ width:100px; text-align: right;}.post-meta p{padding:0 0 3px 0 !important;}#footer { height:59px; background:url(images/footer.gif) no-repeat 0 0; }#footer.nav ul{ padding-top:13px; padding-bottom:3px; width:auto;}#footer .copy{ font-size:10px; padding:0 18px 0 0px;}#footer .copy a{ color:#222; text-decoration: none;}#footer .copy a:hover{ color:#666; }.footer_nav ul { list-style-type: none; font-size:11px; font-family: Verdana, Arial, sans-serif; text-transform: uppercase; margin:0px; padding:13px 5px 0 5px; width:540px; height: 34px; overflow:hidden;}.footer_nav ul li{ display:inline; margin:0px; padding:0 20px 0 20px; white-space:nowrap;border-left:1px solid #c3c3c3;}.footer_nav ul li a{ text-decoration: none; color:#333; }.footer_nav ul li a:hover{ color:#dc8546; }#calendar_wrap table { width:80%; margin:0 auto; text-align: center;}#calendar_wrap table td,#calendar_wrap table th { padding:2px;}h2.pagetitle,h2.center { text-align: center; font-size:26px; line-height:1.2; padding:10px 0 20px 0; color:#666;}.page-nav { font-size:10px; padding-bottom:10px; line-height:12px; }.page-nav .alignright{ text-align: left;}.page-nav div{ float:none; padding-bottom:4px; display:block; }.post .postmetadata small { font-size:10px; display:block; padding-top:10px; line-height:15px; }input, textarea, select { font-size:12px; font-family: Arial, sans-serif;}input, textarea { padding:3px; }textarea { overflow:auto; }ol.commentlist { list-style-type: none; }ol.commentlist li { background:url(images/box-c.gif) repeat-y 0 0; width:100%; margin-bottom:15px; }ol.commentlist li .comment-body{ background:url(images/box-b.gif) no-repeat 0 bottom; height:100%; padding-bottom:13px;}ol.commentlist li .comment-author{ background:url(images/box-t.gif) no-repeat 0 0; height:100%; }ol.commentlist p{ padding:5px 13px 0 13px;}ol.commentlist .comment-author{ padding:8px 13px 0 13px; font-size:11px; font-weight: bold;}ol.commentlist img{ float:left;}ol.commentlist .comment-meta{ padding:0 13px 0 13px; font-size:10px; padding-bottom:5px;}ol.commentlist a{ color:#444; }ol.commentlist .reply { padding:5px 13px 0 13px; font-size:11px; }ol.commentlist #respond { background:url(images/box-b.gif) no-repeat 0 bottom; height:100%; padding-bottom:13px; }ol.commentlist ul.children { list-style-type: none; }ol.commentlist ul.children li{ margin-bottom:0; }h3#comments { padding:20px 13px 10px 13px;}#respond { padding:20px 13px 0 13px;}#respond h3{ padding-bottom:10px;}#respond p{ padding-bottom:10px;}#respond input{ width:250px; }#respond input#submit{ width:150px; }#respond textarea{ width:550px; height:200px; } #content #searchform { text-align: center;}#footer ul { height: auto !important;}
Thanks
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

To float, with it's neighbouring floated element, side by side, it has to be of a set width, so it can slot in, to do this you have to remove the margin.ORwith the sidebar, remove float, and increase the margin to#sidebar {margin-left:0;margin-right:545px;}the element is now just a normal element, and occupies the space left by the floated element.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...