{"id":382,"date":"2022-08-30T15:00:25","date_gmt":"2022-08-30T15:00:25","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/css-div-dynamic-width-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:00:25","modified_gmt":"2022-08-30T15:00:25","slug":"css-div-dynamic-width-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/css-div-dynamic-width-collection-of-common-programming-errors\/","title":{"rendered":"CSS div dynamic width-Collection of common programming errors"},"content":{"rendered":"<p>I got a little problem with the div width. I show you an image of what I have<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/W56Ca.jpg\" \/> .<\/p>\n<p>There is an outside div that has no specified width, it can be small or big.<\/p>\n<p>On the right we got a image that floats on the right.<\/p>\n<p>The text div contains a dynamic width that fills all the undefined width space. and inside a undefined width text.<\/p>\n<p>What I want is that the overflow of the Text Div is hidden when the text width is more then the Text Div space.<\/p>\n<p>The problem is how to specify a width to get the overflow on a dynamic width ? If I don&#8217;t specify any width, the image will go under the text if it&#8217;s too long.<\/p>\n<p>I hope I was clear enough.<\/p>\n<p>Thank you for your help.<\/p>\n<p>Edit:<\/p>\n<p>Here is a bit of code to be more clear.<\/p>\n<pre><code>\n    <img decoding=\"async\" src=\"img.jpg\" class=\"img\" \/>\n    <br \/>some text that is too long<br \/><br \/>\n\n\n\n.img {\n    float: right;\n}\n.text {\n    float: left;\n    overflow: hidden;\n}\n\n<\/code><\/pre>\n<p>The problem is that .text doesn&#8217;t have any specific width, so the overflow doesn&#8217;t work<\/p>\n<ol>\n<li>\n<p>DEMO HERE<\/p>\n<p>so let me get this straight:<\/p>\n<ul>\n<li>you want the text to be clipped when they overflow<\/li>\n<li>however, you want to set limits using the div where it&#8217;s contained (which is dynamic)<\/li>\n<\/ul>\n<p>try this<\/p>\n<pre><code>\n    <img decoding=\"async\" src=\"myimage.jpg\" \/>\n     some long content\n\n\nimg{\n    float:right;\n}\n\n.container{\n    overflow:hidden;\n    zoom:1;\n}\n\n.flexi{\n    white-space: nowrap;\n    overflow:hidden;\n    zoom:1;\n}\n<\/code><\/pre>\n<\/li>\n<li>\n<p>There are many solutions:<\/p>\n<p>One example:<\/p>\n<p>http:\/\/jsfiddle.net\/SHYZR\/<\/p>\n<\/li>\n<li>\n<p>As per my understanding, you want that as and when your DIV is filled out by some text, its width should be increased respectively. try out this :<\/p>\n<pre><code>div\n{\nwidth:150px;\nheight:150px;\noverflow:hidden;\n} \n<\/code><\/pre>\n<p>Using this, your overflowed text which goes beyond 150px will not be displayed.<\/p>\n<\/li>\n<li>\n<p>You can fix the width of Text div to occupy a percentage of outer div and leave the remaining space for the image depending on your image size.<\/p>\n<p>Check here<\/p>\n<p>edited to put the correct link.<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-11-09 18:41:04. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I got a little problem with the div width. I show you an image of what I have . There is an outside div that has no specified width, it can be small or big. On the right we got a image that floats on the right. The text div contains a dynamic width that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-382","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}