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/
Related
Please check this example that I made:
HTML:
<body class="pcon">
<div class="ccon">
</div>
</body>
CSS:
.pcon{
border:solid;width:100%;background-color:pink;
}
.ccon{
width:2000px;height:300px;background-color:green;
}
https://jsfiddle.net/fpv3tfu6/4/
This is for the site that I am making, I have a div with a fixed size that might not be accommodated by the parent div if the user decided to resize the window, since I am using a width of 100% and my div has a fixed size of 1200px and if the user decided to resize the window, the same scenario happens since the parent will have to adapt to the new width.
To emulate what the scenario is, I have a parent div with 100% on width and it has a child with a div width of 2000px. As we see, the border doesn't completely "cover" the green box. What should i do to make the parent's border contain the div with a bigger size due to possible resizing?
The solution that I thought of is to use min-width (since the parent's width will be bigger than the pre-specified div's width).
I have a parent div with no width specified(it has a default width of 1440 px). There is a child div inside it of which width is 980px and centered. When i zoom in to the divs, parent div width shrink according to the zooming. It get smaller than its child div and child div overflows. But i want parent div not to shorten then child div. It's minimum width must be at least 980px. How can i do that?
To prevent it from shrinking you can use min-width:980px in parent div.
But ideally if it has been coded right the ratio of the div's should be in sync in zooming.
Hope that helps.
Happy Coding !!!
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.
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.