I have some little problem setting the right height of some informative boxes.
If you go in this example page you can simply understand what my problem is: http://onofri.org/example/example3/test2.html
As you can see under the Main Report area I have 3 boxes.
The problem occurs in the boxes titled as Links and in Work Supported by Japanese Trust Found
As you can see these boxes contain some informative text. The problem is that if I enlarge the character (in the browser, using CTRL+) this informative text goes out of the box (it goes out of the bottom of the box)
Is there a way to solve this problem? I want that box always contains its content.
Thanks in advance.
Use the min-height property to set the height. This allows the boxes to "grow" when needed.
Here's an example: http://jsfiddle.net/43MjD/4/
Don't give the div a height so the box will expand as the text does.
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 .
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I am pretty new to HTML and CSS.
I need to create a drop down box (using select2) followed by a button.
Both should be on one line (no line break in between them).
Both are contained within a div element.
Upon resizing the screen, I want the select2 to be stretched up and consume\release the additional space, while the button remains fixed in size and in its location (right after the select2, not breaking to the next line). I need the select2 to have min-width and max-width values he can 'leave' in between.
I have googled and searched here, found many answers directing me to use white-space:nowrap, and display: inline-block but I keep failing to achieve my needs.
Here is a fiddle containing my attempts:
Any help?
Have updated your fiddle. jsfiddle.net/TNabn/6/
Let me know if this is appropriate as question is phrased slightly confusingly
Thanks
In Coda, my text float divs work perfectly. The text and the divs are both 1 em:
However, once I go to look at this same site in Chrome, the text now listens to the div below it, and as you can see the text is all on one line:
What's wrong here? HTML/CSS: http://jsfiddle.net/u773M/2/
The size of your font is currently too big. Set a smaller font size on the anchor (not the list item, as that will change the size of your steps) and add set the anchor to display: block.
Without the proper space for the letters to spread out, they are just getting cut off and not rendering correctly.
Giving widths to the text area or max-width (newer browsers) and either floating or displaying these will help with cross browser implementation - I have had similar issues before and you will find ie7 likes widths on text to be set dependant on the mark-up that surrounds.
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.