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>
Related
I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/
I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.
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 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)
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.