I have a div with an image in it, and the image is too large for the div. I have solved the overflow problem with the obvious CSS overflow:hidden trick.
But, the problem is that when the div's parent resizes (shrinks), the div holding the image won't shrink because of the image in it.
Is there a way to have a resizable div with an image in it (almost like a background image) that overflows?
MY DIV STRUCTURE:
<div id="parent">
<div id="image_holder">
<!-- this image will inevitably be larger than its parent div -->
<img src="too_big_for_div.jpg" />
</div>
</div>
MY CSS:
#parent { width:100%;}
#image_holder { width:100%; overflow:hidden;}
The #image_holder div will not resize to a smaller dimension now. Any ideas?
I 've tested your code and it does resize the inner div. To actually observe it, try setting the border property of the image_holder, and also set the parent 's percentage width to a lower value like so:
#image_holder { width:100%; overflow:hidden; border: 1px solid red;}
#parent { width:70%;}
If you resize the browser window and can observe the rightmost border, it means your DIV resizes normally. Perhaps there's something else wrong.
If you could provide more info, I'd be glad to help...
P.S.: Tested in IE8, FF 3.6.3
First, try to set the parent both width/height with pixels, not pct.
Also, won't a overflow hidden on parent would have the desired effect?
#parent{width:100%;overflow:hidden;}
#image_holder{width:inherit;}
If you make the image a background image of image-holder it should resize properly regardless of widths of the corresponding divs (assuming overflow and attachment are properly configured)
Related
I want to make a div that follows the viewport. I am not able to use fixed positioning. For some reason the div doesn't follow the viewport properly, it always 'lags' behind, especially when changing scroll direction. You can see what I mean on plunker here.
That is the first part of the problem. The second is that I need the div to immediately move into the viewport when it appears. (Clicking anywhere in the output panel in the plunker will toggle the div to appear). The *ngIf part of the appearing is important because in my actual app I am using a component with entry animations instead of a div, so no [hidden] I'm afraid.
So why can't I use fixed positioning?
Basically, fixed positioning causes the element to calculate the width differently to its sibling elements when the viewport contains scrollbars. I also can't use the overflow: scroll trick on the element because it has shadows that get clipped by the viewport. It also looks ugly having two scrollbars.
Here is a fixed centered div in a wrapper using flex.
Demo Here
#wrapper{
position:absolute;
width:100%;
height:100%;
position:fixed;
display: flex;
justify-content: center;
}
#my-app{
position:relative;
width:50%;
height:50%;
background-color:green;
}
<div id="wrapper">
<div id="my-app">
</div>
</div>
I have a simple HTML layout:
<div style="position:relative; width:200px">
<div style="position:absolute; top:0; left:0; background-color:red; z-index:-1; width:100%; height: 100%"></div>
Some text goes here....
</div>
Something like this works fine in all the browsers, except for IE6. As the text is added the top div is stretched and absolutely position div is stretched as well. But in IE6 the absolutely position div will always stay only 1 line in height. I know that IE6 can't dynamically recalculate sizes, and because of that you have to set height: 100% on the body tag if you ever want to use height: 100% anywhere on the page, but in this case, I can't set height:100% on the outer div, since I want it to be just the right size for the text inside of it. Any help?
Add overflow: hidden; to the absolute div.
This is a known bug in IE6 but for the life of me I can't recall the solution. I'll look it up but, off the top of my head, try adding 'line-height:1', or some value, and see if it fixes it.
After a lot of testing and investigation, I came to a conclusion, that there's no way around this issue for IE6, other than JavaScripts, which doesn't work for me. So I had to change the structure around a bit. The end result looks something like this:
<div style="position:relative; width:200px; background-color:red;">
<div style="margin: -10px -20px">Some text goes here....</div>
</div>
This way the content of the inner div is going to set the height of the inner div and negative margins on it, will make sure that the outer div is always 20px bigger in height and 40px bigger in width the content div. I know the answer doesn't make sense when looking at the question, but it works exactly the way I need it too, since it allows me to create multiple divs on the background (outer div) with images and then adjust content div with negative margins, so that it occupies the same amount of space as all of the background divs.
I have a centered wrapper with following CSS:
div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;
background-color:black; }
inside i have a div with following css:
position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;
inside of this div is an image which has 759px width, that makes the wrapper grow larger and makes the browser show a v-scrollbar on lower display resolutions.
what i want is to make the image go outside the wrapper but prevent the browser from showing the scrollbar, so that the right side of the image is only shown if your browser window is large enough and the wrapper keeps its 1200px width. i can't make it a background image because it goes over some of the other content.
something that is compatible with >= IE7 would be nice.
i uploaded a pic of the page to show what i mean:
http://img153.imageshack.us/img153/6070/hpx.jpg
the blue box is the wrapper, it has 1200px width and is ALWAYS centered in the window (unless then window is smaller than 1200px, then it scrolls)
the red box is the image (the green bar is not part of it)
You can set overflow: hidden to the wrapper so that content that exceeds the dimensions of wrapper will not be shown.
see overflow
You are looking for #your_div { overflow: hidden; }, if you want your content to be hidden. Or #your_div { overflow: visible; } if you want your content visible outside the div.
The only method that springs to mind given your requirements is to move the inner element out of that wrapper div and position it in relation to the entire window:
<body>
<div class="abs">the div with the image</div>
<div class="wrapper">the wrapper div</div>
</body>
Unfortunately, this probably means you can't position it very well. You may need to use Javascript to get the width/height of the page and/or the position of the wrapper div, and calculate the offset accordingly. (You'll find questions on Stack Overflow for these bits.)
The problem lies with the img being inline. Not tested but you should 'display:block' the image and then float it or absolutely position it.
I want a top margin for my webpage of say 100px when the window is maximised, but if the user resizes the window to shrink it I want this margin to shrink. The margin should have a minimum size of say 10px and should shrink in proportion to the window height.
An example if what I am trying to emulate is http://www.bing.com/
How would I go about implementing this in CSS? I'm stuggling with min-height, min-width, height and width at the moment.
Thanks.
Without seeing some code, it's difficult to give a great suggestion. But, you can style the html and body to be 100% height which should actually conform to the height of the viewable portion of the browser:
html, body{ margin:0; padding:0; height:100%; }
From there, you can add a div directly into the body and give that a height that is a percentage:
#push{ height: 15%; }
Your body html would look something like:
<body>
<div id="push"></div>
<div>
asdf asdf
</div>
</body>
When the body height changes, so will the push height. You may need to tweak that number to get it to your liking. You can also give the push a min-height, but that is not supported in IE6. Also, that 100% html / body could give you trouble later depending on how you're doing your footer and things, so beware and good luck.
I have a centered div on my site, using a fixed width and margin:0 auto;
All looks fine in IE, but on FF, for the pages with long content, only the top part of the div has the proper div color, and the rest has the body background color.
what I'm doing wrong?
many thx
Without seeing your code it's hard to tell, but my bet is that you've set the div height to %100, which means 100% of the viewport.
It will not stretch beyond that, even if the content is long enough. This is the correct behaviour.
To make it the full scree height when there's not enough content, and go beyond the viewport height when there's more than enough content, you'll need to use two divs.
Here's an example I've hosted:
Div height 100% fix
If you know the width (i.e:600px) and height of the div you can use the following.
I center divs in one direction using 3 parameters:
Horizontal:
<div class='hcnt'>Some H Centered Text</div>
CSS:
.hcnt{
left-margin:50%;
width:600px;
left:-300px;
}
Vertical:
<div class='vcnt'>Some V Centered Text</div>
CSS:
.vcnt{
top-margin:50%;
height:400px;
top:-200px;
}
Both:
<div class='hcnt vcnt'>Some completely Centered Text</div>