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 !!!
Related
I want to make element scrollable if it's content is becoming too large to fit in parent's max-height. The problem is that it overflows parent instead of adding scrollbar.
I know that providing height or max-height in pixels to element would fix the issue but I cannot do that because the height of the element is not known.
Link to the code: https://codesandbox.io/s/scrollable-height-ewfbmo?file=/src/App.js
(I want purple section to be scrollable)
So to scroll the purple region:
Just add overflow: auto to the .body class (the parent of the purple region)
I forked your code-sandbox:
https://codesandbox.io/s/scrollable-height-forked-9hvrpy?file=/src/styles.css
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 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 have a container DIV. Inside the container are three elements. Two banner DIV's (simulating a header and footer) and a TABLE. The TABLE is enormously wide. There is no way to get around the horizontal scrolling and I must have the banners background color extend to match the full length of the DIV. How do I have the DIV expand its width to the entire width of the TABLE and why is the TABLE not affecting the width of its parent DIV?
thank you.
See my jsfiddle
Removing the width: 100% and adding display: inline-block to the container element should do it. http://jsfiddle.net/rqJQg/6/
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/