Is there any way to make a div not extend it's width, but make an image which is visible outside the div in IE8? For example, my div might be 200px wide, but the image 250px wide.
You could position the image 'absolute'?
div > img {position:absolute;}
Set the div's width to 200px and its overflow to visible.
Related
I have a fixed DIV container size : 375px * 667px for phone. How this DIV and all element inside (img,text,etc) will auto enlarge when user using a desktop browser?
original fixed div
auto enlarge
The trick would be to add height: 100% to all elements in the dom-tree that are around the div that needs to be 100% of height.
Don't forget the body, tag, as for most browsers, your body is not bigger as the content in it.
Some browsers even need to have it set on the HTML-tag.
I have a div with an image and a label in it. The label must be ontop of the image so i made the outer container div relative.
But i also want that the container div has the same width as the image. So i can set a 100% width on my label. I also don't know the width of the image before hand. This is loaded dynamically.
But the container div always has a 100% width set to it. Is there any way to let it have the width of the image that is inside?
Example: http://jsfiddle.net/sbNZu/391/
Do one of the following rules to your container:
Add a display:inline-block
Add float:left
Either will shrink the container div to fit the contents.
I've looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)
I want the menu and the "page" to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.
As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container...
Am I going about this the wrong way? Insight would be very helpful, thanks in advance!
Set the div's height property to 100% of it's parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.
#menuDiv {
height: 100%;
margin: 100px 0 25px 0;
}
Same for the content div. The div's size properties won't change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it's parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don't do this and the content div is smaller it'd look ugly.
I'm trying to have an image inside of a position:fixed div respond to the width of the browser.
The img is inside of a 100% width div with a margin of 100px on both sides, and those are both inside of a div with a max-width of 750px, all inside of a div that is fixed position.
Once the browser is resized to something less than 750px, normally, the image would begin sizing down automatically. It seems that since it's in a fixed position that it is just getting cut off. Is there a way around this, with the div still remaining fixed?
You'll want to give the image element a percentage width e.g. img{width:100%;}
http://jsfiddle.net/jg6va/
When I have a table with a width of 800px and an image within it with a width of 1000px, the table will expand to encompass the image. When I have a div with a width of 800px and the same image within it, the div will remain at 800px and the image will cross over the div's border. How do I get a div to replicate this expand-when-necessary nature of a table?
Set the width to auto and the min-width to 800px if you don't have to support IE6.
Like this
#mydiv {
width:auto;
min-width:800px;
}