Search the Community
Showing results for tags 'max-width'.
Found 5 results
-
Maybe I'm missing something obvious here, but I'm having a problem with max-width when applied to a div with padding. Can anyone tell me what the issue is here? If I have a div that has a max-width of 960px and a width on 100% it works as expected. If I then add padding, the div does not contract with the browser until it has overlapped it a certain ammount. <!DOCTYPE html><html><head><style> .content {width:100%;max-width:920px;padding:20px;background-color:white;height:500px;margin-left: auto;margin-right:auto;}body {margin:0px;padding:0px;background-color:red;}</style></head><body><div class="content">But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</div></body></html>
-
Recently I started exploring modern web technology and have been wondering about how to avoid getting long lines of text that become hard to scan. I made a demo with some ideas and would apreciate if anyone wants to coment. http://piedpiper.site40.net/index.html?text=/design_website/web_design.html#visual (Note: currently you have to resize the frame to get the multi column to do it's thing and IDK why it wont take you straight to the #visual label yet... but if I wait until I understand it all then I suspect I'll never get anywhere at all ;o)
-
Hey, been awhile... So I am playing around with fluid/responsive website design and I have hit a block relating to Max-Width being ignored when using Float. I know this is just how it is (honestly I can't understand the logic of why though), but is there a way around it? Simply I got this: <div id="wrap"><div id="left">Content</div><div id="right">Content</div></div> #wrap {width: 900px;}#left,#right {max-width: 450px;min-width: 320px;float: left;} The result is both #left and #right become 320px wide divs floating left... To outline quickly what I want to happen just incase I am approaching this all wrong... I want the two divs side by side until both of them squeeze down to 320px as a result of a different device screen size or the shrinking of a browser window. After this the right div will drop under the left div and they both will resize to fill the remaining space until again they are squeezed down to 320px... Thanks for any input.
-
There something which I don't really understand, I have the following code HTML snippet <div class="outer"><div class="inner">STUF SDF DFSD FDF SDFSDF SDSD FDSFDSF DF sdad asd ad asd asd ad asd das dsad sa dsa dasd sad asd assvdf dfasdf asdf ad fsafd DSF D F</div></div> and the following CSS .outer{ display:table; width:100%;}.inner { display:table-cell; max-width:200px; height:50px; background-color:silver; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} If the calculated table width is longer than 200px for example 500px, then I would expect the inner div to stop at 200px and the content inside would also stop at 200px. But in reality the inner content actually stretches to the width of the table. Is this the correct behaviour? Thanks
-
Hello everone. The situation: I got images that I want to give a "max-width" attribute in CSS, so they don't mess up my screen. This works great in IE, Google Chrome and Safari, but seems to get messed up in Firefox and Opera (and old IE browsers) The code: The CSS: .tienjaar {max-width: 80%;display: block;margin-left: auto;margin-right: auto;} The html/php: <img class="tienjaar" src="some/img/url.png" alt="some alt text"/> The example: http://www.hondenvri...p?&loc=timelineI Test it in both Google Chrome and Firefox if possible, try to resize the screen, you'll see that the rightern box goes 'beyond' the screen. I am 100% sure that it is because of the images. Extra information: I am aware that I could just put a "width" instead of a "max-width", but that would mean stretching my images when they're smaller, which I prefer not to do. If you got any solution for this, thanks already!GreetingsJordumus
