Hey Dears, i faced a problem in css , the problem is that the content being pushed outside DIVs , i do not want use overflow because it hide the content , and what i look for is keep the content but inside the div with the width i selected. The HTML source is : <div id="wrapper"> <div id="main"> <!-- Right Coll --> <div class="rit">Right Coll</div> <!-- Left Coll --> <div class="lft">Content goes Here!</div> <!-- middle Coll --> <div class="mid">right Coll</div> </div> </div> HTML: the css source : body{ padding:0; margin:0; font-size: 11px; font-family:tahoma,"Arabic Transparent","Traditional Arabic,Arial"; background:#eaeef1 url('images/backgrounds.gif') scroll repeat-x; background-position: 0% -680px; color: #333333; direction:rtl; } #wrapper{ margin:0pt auto 0pt auto ; width: 974px; } #main{ padding: 5px 5px 4px; *padding-bottom:5px; background-color: #ffffff; border:solid 1px #afc2e0; border-width:0px 1px 1px 1px; } .rit, .mid, .lft { background:#ffffff;display: block;} .rit { float:right; width:148px; margin-left:12px; _margin-left:10px;} .mid { float:right; width:489px;} .lft { float:left; width:300px; margin-right:10px;} Code (markup): anyidea ?
You need to float your #main div so it'll contain your other floated div's: #main{ float: left; } Code (markup):
1) your comment placement IS going to trip the double render and possibly the dissapearing content bugs in IE. 2) since you are dicking with all those asterisk and underscore hacks one can assume you don't have a valid doctype? 3) You know the content in your columns is inconsistent with their placement? 4) I'm assuming champ figured out what you meant was you want float wrapping, which is why I'd assume using overflow:hidden and a haslayout trigger as the correct approach instead of the float, through I'd have to see what it is you are ACTUALLY working on to say for certain... I think your engrish moist goodry was getting in the way of my understanding your post. Though with all the other apparent issues from the lack of a fallback font-family, to a convoluted extra wrapping div for no fathomable reason, to declaring a px font size on BODY - there's a heck of a lot wrong besides some float wrapping behavior.
champ : i did it but nothing was happened the problem still exist . GameInfiniti : i did it by wrong and i reported for the other topic . deathshadow: 1- normaly i don't use comment i added them just for explaining , but can you tell me the correct way to comment? 2- yes i know i remove them after i get the result i look for. 3-really no so can you be more explicit im a beginner in css so i don't know a lot . i attached a picture to make the problem near of you : the problem : i want to keep the text inside each DIV(.rit,.left.mid) without hide anything..
What you are asking for - without scrollbars or hiding content really isn't possible in a pure CSS layout... IF your content is going to be that wide with no spaces... So add some spaces to your text so it will wrap; You should never have content that wide without spaces in the first place unless it's an IMAGE... and then I'd have a wrapping div constrained to the box with overflow:auto or I'd resize the image to fit. Seriously, what are you doing that would have a single word 60 to 100 characters long?
deathshadow , okay i understand what you meant and okay the problem is solved , and i still looking for more benefits specially if it came from an experience like you . can you please correct my comment? mm you said its a wrong method and tell me how can i do hacks for ie and in the same time get a pure valid css .. sorry for my bad english.. and really thanks a lot for your help i didn't find the good words to say that , but really thanks..