CSS - Text Overflows Outside The <div>
link
Notice the right menu, the text goes outside the box. It works fine on the left, but I can't figure out why the right side does that. Similar TutorialsHeya Im having issues trying to keep text inside a div. At the moment the text just runs out of the div instead of starting a new line! html: Code: <body onLoad="goforit()" > <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Web Design</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a> <ul> <li><a href="http://www.finalonline.co.uk/" target="_blank">Link 1</a></li> </ul> </li> </ul> <br style="clear: left" /> </div> <div id="content"> <div id="header">Web Design</div> <div id="container1"> <div id="containermainleft"><img src="img/blue_gradient.jpg" /></div><div id="containermainright"><p>textooooooooooooooooooooooooooooooooooooooooooooooo<p></div> </div> </div> <div id="copyright">Designed and Maintained by Final Online</div> </body> css: Code: /* Final Online CSS */ body { margin:0; auto; background-color: #A4D3EE; } #content { background-color: #A9A9A9; height: 100%; width: 710px; margin-left: auto; margin-right: auto; min-height: 500px; border: 1px solid white; clear: both; } #copyright { background-color: #414141; width: 710px; margin-left: auto; margin-right: auto; text-align: center; } #header { background-color: white; width: 99%; text-align: right; padding-right: 1%; padding-bottom: 0.2%; margin-left: auto; margin-right: auto; font: normal 13px Arial; } #container1 { background-color: red; width: 85%; height: 120px; text-align: ; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: 5%; clear: both; border-bottom: 1px solid white; } #containermainleft { background-color: yellow; width: 50%; height: 110px; text-align: ; margin-top: 2px; float: left; border-right: 1px solid white; } #containermainright { background-color: yellow; width: 49%; height: 110px; text-align: ; margin-top: 2px; float: right; } img { width: 200px; height: 100px; border: 1px solid white; margin-top: 3px; margin-left: 10px; vertical-align: center; } p { text-align: justify; margin: 0px; } thanks in advance for any help Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code: html { scrollbar-face-color: #ADDFE7; scrollbar-highlight-color: #ADDFE7; scrollbar-3dlight-color: #ADDFE7; scrollbar-darkshadow-color: #ADDFE7; scrollbar-shadow-color: #ADDFE7; scrollbar-arrow-color: #000000; scrollbar-track-color: #ADDFE7; overflow:hidden; } body { background: #FEFFED; font-family: 'Verdana', 'Arial', sans-serif; font-size: 10px; color: #000000; cursor:default; margin: 0; padding: 0; overflow:hidden; } div.center { /* Make element float in the center */ position: absolute; left: 50%; top: 50%; /* Set the width and height */ width: 750px; height: 410px; /* Set margin to half the values of width/height */ margin-left: -375px; margin-top: -205px; } div.rect { background: #ADDFE7; padding: 0px; width: 750px; height: 410px; overflow:auto; border: 1px solid #000000; z-index: 1; } Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: 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" dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>form one : shop</title> <meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." /> <meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="authors" content="The Zen Cart™ Team and others" /> <meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" /> <base href="http://formone.net/shop/" /> <link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index"> <div class="center"> <div class="rect"> <table class="centershop" border="0" cellspacing="0" cellpadding="0"> <tr><td> <table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center"> <tr class="headerNavigation"> <td align="left" valign="top" width="33%" class="headerNavigation"> <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | <a href="http://formone.net/shop/index.php?main_page=login">Log In</a> </td> <td align="center" width="25%"></td> <td class="headerNavigation" align="right" valign="top" width="33%"> </td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="header"> <tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //--> <td valign="middle" height="23px" width="200px"> <a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td> <td align="center" valign="top"> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" class="main_page"> <tr> <td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td> <!--// bof: categories //--> <table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table"> <tr class="leftboxheading" id="categories-heading-tr"> <!-- Sidebox Header --> <td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td> </tr> <tr> <!-- Sidebox Contents --> <td colspan="3" class="leftboxcontent" id="categories-content"> <br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td> </tr> <tr> <!-- Sidebox Footer --> <td colspan="3" height="5px" class="leftboxfooter" id="categories-footer"> </td> </tr> </table> <!--// eof: categories //--> </td></tr></table></td> <td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2"> <tr> <td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td> </tr> <tr> <td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td> </tr> <tr> <td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td> </tr> <tr> <td class="plainBox">Define your main Index page copy here.</td> </tr> <tr> <td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td> </tr> </table><br /> </td> <td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td> </td></tr></table></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr class="footertop"> <td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer"> <tr> <td class="footerbottom">Your IP Address is: 69.159.1.195</td> </tr> <tr> <td class="footerbottom"></td> </tr> </table> </td></tr> <tr> <td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td> </tr> </table></div> </div> </body></html> They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . Hi this is the problem: I have a header div which has a transparent background. This is a set image of lets say 200px Under that i have a solid color div which needs to stretch vertically under that i have the footer which is under all of it. Above the header and the solid color (but not the footer) is the content. I need the solid color div to expand vertically as the content get bigger. In turn i need this to push the footer down. The issue is that the content which is above the solid color div and the header one cannot push the solid color divs height down. Heres what im working on... PHP Code: <style> #outer{ border:1px solid #000; width:600px; height:100%; left:0px; position:absolute; } .trans{ position:absolute; top:0px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; z-index:50; } #content{ position:absolute; top:0px; height:100%; width:100%; } .stuffcontent{ position:absolute; top: 0px; z-index:100; width:600px; z-index:100000; border:1px dashed #000; } .solid{ position:absolute; bottom:0px; height:100%; width:600px; background-color:#bed; z-index:10; } .footer{ position:absolute; bottom:-200px; height:200px; width:600px; left:0px; background-color:#eff; border:1px solid #000; } </style> <div id="outer"> <div id="content"> <div class="stuffcontent"> <div style="z-index:99999999; position:relative; width:600px; height:100%; display:block;"> TEST---- TEST ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^<br/> ^TEST<br/> <div class="solid"> <!-- THIS SHOULD BE THE SOLID COLOR UNDER THE CONTENT--> </div> <div class="footer">Footer is after the content overflow</div> <div class="trans">Header : Transparent</div> </div> </div> </div> </div> I have been able to bodge a fix where the content is duplicated in a php ob buffer and then spat out again into another div. While setting the original div to hidden but keeping its height and using it as a container. This is well over drawn and i need a simpler fix. (This is not the above code please not) This is the site i have created. The content is over the transparent div and pushes the solid green div down untill it reaches the footer. The footer has a large height to cover any gaps. This was created using the ob buffer method but i need to do this in a simpler fashion. the site How do I position a fluidly nested div inside a fluid container div but have the nested div 100px from each side? At the moment the nested div is fluid by applying 100% width, but that makes the nested div the same size as the container (instead of 100px smaller on each side) and ends up overflowing the container. Without using overflow:hidden how am I supposed to nest it so it nests at the correct size? Code: .container { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .nest { position: absolute; top: 0px; left: 0px; margin: 100px; width: 100%; height: 100%; } Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;} title {font-style: italic} thead {font-weight: bold; border-bottom: thick double} td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green} table {border: hidden} .Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left} .title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden} caption {font: 2em bold} #intro {position: static; color: black; height: 20%; backXground: #cccccc;} #addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;} #table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;} #table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;} #footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;} and xhtml (error.html): Code: <!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" lang="en" xml:lang="en"> <html> <head> <link rel="stylesheet" type="text/css" href="error.css" /> <script type="text/javascript"> //Bring a span element and descendents to the front and send its span siblings and their descendents to the back function bringToFront(id) { if (id != null) { if (document.getElementById(id)) { //Send all parent's descendents in spans to the back var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN"); var s=0; var c=0; while (span[s]) { setzIndexOfBranch(span[s],9); s++; } //bring id and descendants to the front setzIndexOfBranch(document.getElementById(id),10); } } } //Set the zIndex of a node and all of its descendants function setzIndexOfBranch(node,value) { if (node.style != undefined) { node.style.zIndex = value; } var c=0; while (node.childNodes[c]) { setzIndexOfBranch(node.childNodes[c],value); c++; } } function parseXML() { text="<root>"; text=text+"<heading>XML CSS HTML test</heading>"; text=text+"<table1data>"+"<table>"+ "<caption>"+ "First table"+ "</caption>"+ "<thead>"+ "<td class="title">Column1</td>"+ "</thead>"+ "<tr>"+ "<td>row1</td>"+ "</tr>"+ "<tr>"+ "<td>row2</td>"+ "</tr>"+ "<tr>"+ "<td>row3</td>"+ "</tr>"+ "</table><br/>Some text after table 1<br/>"+ "</table1data>"+ "<table2data>"+"<table>"+ "<caption>"+ "Second table"+ "</caption>"+ "<thead>"+ "<td class="title">Column1</td>"+ "</thead>"+ "<tr>"+ "<td>row1</td>"+ "</tr>"+ "<tr>"+ "<td>row2</td>"+ "</tr>"+ "<tr>"+ "<td>row3</td>"+ "</tr>"+ "<tr>"+ "<td>row4</td>"+ "</tr>"+ "</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+ "<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+ "<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+ "</table2data>"; text=text+"</root>"; try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } catch(e) { try // Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } catch(e) { alert(e.message); return; } } document.getElementById("table1").innerHTML= xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue; document.getElementById("table2").innerHTML= xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue; document.title= xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue; } </script> </head> <body onload="parseXML()"> <h1>Positioning test script</h1> <span> <fieldset id="intro"> <legend>header</legend> <span id="to"></span><br/> Header text </fieldset> <br/><br/> <fieldset id="addresses"> <legend>addresses</legend> <br>This is in the addresses fieldset</br> <span id="table1" onclick="bringToFront('table1')"></span> <span id="table2" onclick="bringToFront('table2')"></span> <br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br> </fieldset> <br/><br/> <fieldset id="footer"> <legend>footer</legend> This is all <br/><br/><br/><br/><br/><br/><br/><br/> footer text<br/> <br/>Down to here. </fieldset> </span> </body> </html> produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. hi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Is it possible to have text run around a div positioned with absolute positioning? Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. |