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.
Related
If I add a background image to a div using CSS, I can't view the image until I add some content/text inside of the div.
Why is that?
Because background image does not give div content.
An empty div without width/height defined will not show. A div does not have natural padding/margin so without content it has a height of 0 so you don't see it
i will assume that the div have no height, so it will take height: 0; in case no data.
try giving it height.
Add background-size property to div.
As background-image doesn't have height and width. Cross check your html in Developer console. You'll find that div is present.
background-size: 100% 200px
I have a with an image inside it can not be in the background of the div css. It is 3000px wide, the div must occupy 100% of the resolution of the user and need to focus the image.
Now it is painted correctly cut the image inside the div to 100% width * height 504px. However, I need to focus the image, because now comes attached to the left and above the div.
How I can make the image is centered? It can not be by CSS background or negative margins because the resolution of each user is different and not for a fixed width is just 100%.
Use this in your css style,
It may be useful to you
display:block;
margin:0 auto;
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
I've got a HTML / CSS question about growing a div to fit the screen when filled with other divs.
Here's my structure which is inside my "main" div:
I've got 3 divs inside of a container div, with the last div inside the container having an overflow:auto; property (as it has scrollable content). The whole container div is floated left.
How can I get the last interior div to expand with the screen resolution? The problem here seems to be that my container div has no real "size" so when I set it to height: 100%; nothing really happens. Of course this means that if I assign it an actual size, then it won't grow to the resolution..
What should I do?
Have you looked up CSS3 media queries? Here's a tutorial and demo.
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.