.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
Related
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
See link: bit.ly/Mh9PGJ
When I make my browser window smaller, eventually 'Commercial Management' is too big for its slider box and gets shifted about. The best solution I believe is to simply increase the overall height of the entire entity (including every slider) so that the text has more space. But for this to work I'm guessing you would need some kind of min-height property there.
My problem is that I've tried min-height on practically everything there and I end up with odd-looking results, like the content expands but the green sliders do not, etc.
Any solution at all to this problem would be amazing. Thank you!
possible solution can be
adding your h2 class to those attributes
white-space: nowrap;
text-overflow:ellipsis;
it is not the correct way but at least if you dont have enough space, you can simple finish the word with ...[3 Dots]
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
Basically its a 2 column setup, with a dynamic width content column, and a static width menu column.
The content column is going to contain pre-tags (with code), and I need overflow:auto on the pre-tag inside the table to work.
So far I've had little luck. The nature of the pre tag forces a certain size on the table cell, which in turn refuses to be any smaller than the width of the pre tag.
Can anyone help out?
Ps. I've placed a second pre-tag on the page, which works as intended, but thats probably because it's not inside a table.
Add white-space: pre-wrap; to the element. max-width:100% may help too.
I found an acceptable solution.
The solution is a negative right margin for the pre (code) element.
Basically, a negative right margin will force the pre to shrink if it needs to.
I made margin-right -800px, and the width 97%.
I noticed that the width, paddings and borders need tweaking if to look good at all resolutions, but the solution works.
A simple solution that was hard to dream up.
[EDIT]
There was a link to an example, but it has been taken down.