I have a difficult layout in my website and I have a problem now with IE7. How can I in this example set the inner wrapper to fill the height of the outer wrapper?
http://jsfiddle.net/fMPNw/2/
You have to explicitly define the height of .wrapper, in that situation. That being said, if your top: and bottom: attributes are going to make the height dynamic, your only solution is resetting the height with JavaScript, binding the height to update on window resize, etc.
I was able to get .wrapper2 to layout correctly by making it absolutely positioned. Using the following 2 lines of CSS, width to correct the width issue caused by absolute positioning.
position:absolute;
width:100%;
End result being:
.wrapper{
position: absolute;
top: 310px;
bottom: 130px;
border: 1px solid red;
width: 100px;
}
.wrapper2{
border: 1px solid blue;
height: 100%;
width:100%;
position:absolute;
}
Related
I've been looking around for a while today and can't find a question that answers my specific problem.
I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.
How can I fix this? The CSS I have is:
#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}
Change
#wrapper{height:100%;}
to
#wrapper{height:auto;}
Fiddle here.
You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:
#wrapper{
min-height: 100%
}
not:
#wrapper{
height:100%;
min-height: 100%;
}
I have two divs.
The first one covers the whole screen and with a transparent background
the other div has a white background and a higher z-index then the first div. But the transparent background covers the second div with the white backgorund...what can I do to fix this?
.lightbox{
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
filter:alpha(opacity=50);
opacity:0.5;
}
#lightboxContent{
display: none;
width: 325px;
height: 260px;
background: #FFF;
position: absolute;
z-index: 2000;
top:0;
border:3px solid #CCC;
text-align:center;
}
http://jsfiddle.net/DHYFz/
This works perfectly fine for me using IE7+ with your setup. Possible overlapping elements in some other portion of your code?
Possible problem: if you were to, let's say, nest the lightboxContent element, keep in mind that the parent z-index will trump the child.
Easy fix is, not to nest lightbox > lightboxContent. Takes full width and height of container regardless.
An easy way to do it is stop IE7 by putting at the top of your html.
I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):
.ContentExtender {
background-image: url(bgblack.png);
min-height: 10px;
ccmin-width: 200px;
ccwidth:100%;
margin: 0px 0px 0px 1010px;
position: absolute;
top: 110px;
right: 0px;
left: 0px;
}
.MainParent {
position: absolute;
left:0px;
top:0px;
right:0px;
bottom: 0px;
background-color:rgba(70,70,70,.7);
min-height: 600px;
min-width: 1000px;
max-width: 1000px;
height: 100%;
margin: 0px 10px 0px 10px;
z-index:100;
overflow: hidden;
}
You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;
I recently had a problem where I could not extend to the top of the window, which may be similar. I set:
body {
margin: 0px;
}
In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.
seems like there's a small error in your code try editing your
.ContentExtender
and change it to
#ContentExtender
Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below
html{
height:100%;
background:#ccc url(bgblack.png);
}
the above is an example, so please improvise
Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.
Try one of these on your parent div:
overflow: auto;
display: table;
Or in the child div:
display: table-row;
When you try it, experiment with omitting the "height: blabla" attribute.
Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height
I have create a jsFiddle to demonstrate my problem:
http://jsfiddle.net/MXt8d/1/
.outer {
display: inline-block;
vertical-align: top;
overflow: visible;
position: relative;
width: 100%;
height: 100%;
background: red;
}
.inner {
overflow: hidden;
height: 50%;
width: 100%;
margin-top: 25%;
margin-bottom: 25%;
background: blue;
opacity: 0.7;
color: white;
}
<div class="outer">
<div class="inner"></div>
</div>
The thing is that when i need to horizontally center a div inside another.
I specify the height of the inner div in % (eg. 50%) and then the margin-top and margin-bottom to the remaining (eg. (100 - 50) / 2 = 25 %).
But as you see in the jsFiddle it's not working as intended.
Calculating the margins from the Parent works, but it's not possible for me, because I dont have access to the div's parent, as the elements-style object is bound to the object via knockout.js and it's not so simple as shown in the jsFiddle.
Hope anyone could help me :-)
bj99
Update:
Just found out why this is actually happening, so I'll post here for peaple with similar problems:
From http://www.w3.org/TR/CSS2/box.html#propdef-margin-top :
'margin-top', 'margin-bottom'
Percentages: refer to width of containing block
And not as I tought to the height :-/
To #inner element:
1) Add position:absolute
2) Remove margin-top and margin-bottom properties
3) Add top:25%
That's it!
It is a solution to your problem.I hope I helped you
.inner {
overflow: hidden;
height: 50%;
width: 100%;
top:0;
bottom:0;
left:0;
right:0;
position: absolute;
margin: auto;
background: blue;
opacity: 0.7;
color: white;
}
There are various solutions to your problem:
1) add position:absolute and top:25% on the inner element - Example
2) use display:table on the outer and display:table-cell on the inner element, this also allows vertical centering. - Example
Each of the solutions has some caveats, I personally try to avoid absolute positionings wherever I can, but this is also up to personal preferences.
If you do:
<div style="width: auto; background: red; color: white">test</div>
You get a div that is stretched to fill the entire screen width (100%). That is what I need to happen.
However, I also need the starting position to be set. So, I need position: absolute.
When I add position:absolute, the width of the div is only as wide as the content within (similar to floats). Is there any way around this?
I cannot simply specify width: 100% since this does not take in to account border sizes, etc.
When I add position:absolute, the width of the div is only as wide as
the content within.. (Similar to floats). Is there any way around
this?
I cannot simply specify width:100% since this does not take in to
account border sizes, etc..
You could use position:absolute; left:0; right:0; top:0.
Like this: http://jsfiddle.net/thirtydot/yQWGV/
You can use width:100% and the css attribute box-sizing, to get the box model working like IE 5.5, i.e. padding and border counted into the width.
div.absolute {
width: 100%;
border: 5px solid #000;
background-color: #F00;
position: absolute; top: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 50px;
}
Here's a fiddle: http://jsfiddle.net/dJtm2/
Be wary though, as it's a relatively new CSS3 attribute and will only work in newer browsers, and as you can see from my example requires the dreadful counter-productive measure that is vendor prefixes.
simply write like this:
div.absolute {
border: 5px solid #000;
background-color: #F00;
position: absolute;
top: 100px;
padding: 50px;
left:0;
right:0;
}
http://jsfiddle.net/dJtm2/1/
in this padding & border not increase the width of the element.