So I have a div tag to sort of draw boxes around various sections, and of course make actual sections.
In one of the sections, there is more text than can be held in the div tag, so I want to for the text within the div tag to have a scroll bar to make it so the text doesn't overflow outside of the box.
How would I do that?
Use the following:
div {
overflow: scroll;
}
If you want them to scroll only in one direction, you can use the overflow-x and overflow-y properties.
Add width and height CSS properties to the div, as well as overflow:auto
If you add overlow:scroll, the scroll bars will be always visible.
If you want to have only horizontal scroll, add white-space:nowrap to the element inside of the div.
Related
I have an application which allows you to drag an image into a div. The problem is that if the image is really large then it stretches the div horizontally and no scrollbar appears. My Div doesn't have a static width set because I'm using a grid type layoutv using percentages. Is there anything I can do with the CSS for a scrollbar appears if the image overflows the div?
Set the CSS property overflow: scroll; on the div tag.
Is it possible to align a button to the bottom of it's parent element, but keep it in the flow so that space is made for it?
I know how to align a button to the bottom use position: absolute; bottom:0 but that makes text overwrite it (example).
I would prefer not to have to hard code the height of the button as bottom padding for the parent element.
You can set padding bottom for parent equal to button height, then text won't go over button.
here is fiddle example
http://jsfiddle.net/t0e9hhn9/
I'm trying to get a div with css property display:table-cell; vertical-align:middle to behave as it "should". My expectation is that text inside these divs would be vertically aligned regardless of whether it's wrapped in an anchor or not.
Here's a jsfiddle: http://jsfiddle.net/smittles/GsKg6/
What am I doing wrong that prevents the vertical-align property from rendering the text out centered vertically, in the same way the header does in this example.
There is no need to use display: table-cell or even float anywere in this example.
To vertically center the text in the header, set the line-height of the <h2> to match the height of #h2wrap. Or remove height from #h2wrap and increase its top and bottom padding instead.
To vertically center the images, labels and the buttons within the <a> tags, set their display to inline-block and add a vertical-align: middle. You will have to explicitly set their widths and also eliminate the extra spaces caused by inline-block, but I believe this would be the easiest solution.
If you have multiple lines of text line-height will not work.
See this for the ways of applying vertical align. The line-height won't work with text that needs to wrap (which I believe you have). You'll have to use display: table-cell.
I'm having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?
Here's the site I'm working on:
http://brimbar.com/no_crawl/RiverHollow/about.html
Thanks!
It's because you have that floated image with the giant margin-bottom. clear: both means "no elements should be on either side of this element", so the footer has to be below that 600px margin.
The reason that the footer text isn't centered without clear: both is because it's only centering within the width between the start of the div and the left side of that image (plus its giant margin).
What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won't need the giant margin, nor will you need clear: both on your footer elements.
Here's a demo: http://jsbin.com/uxiqer/1/edit
Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.
If you don't need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.
Remove the clear: both and add a specific height to the footer not just min-height. I can't get your text to align but I bet it would if you removed "position:static" on it.
Since you hard-coded the 1550px height on the container itself, the footer is taking up the rest of the space available to it since it only has a "minimum-height" requirement not max.
I have a container div with a max-width and a max-height. Inside the container div, there are lots of small divs that i need to scroll through horizontally.
I've hidden the y-overflow CSS and used the inline/inline-block and have had no luck.
Here's the code:
http://jsfiddle.net/BRmCk/
I need the other small divs to show up in the parent div, in one line, horizontally.
any ideas?
Try adding float: left; to your .date_pick_day_cont class.
Example:
http://jsfiddle.net/BRmCk/6/