I have an absolute positioned div with an iFrame inside (doesnt work for silverlight objects either). For some reason it doesnt expand to fill its parent, which it should.
If you replace the iframe with a div with the same ID it works correctly.. Whats the problem?
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com"></iframe>
</div>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}
http://jsfiddle.net/ZfG3g/
sticking the following on the iframe seems to work (in the fiddle at least anyway):
#silverlightControlHost {
width:100%;
height:100%;
... rest of your css ...
}
http://jsfiddle.net/ZfG3g/1/
you may try this
you forget to mention iframe width and height
check the below code this is covering the full parent block
<div id="rightpanel">
<iframe id="silverlightControlHost" src="http://google.com" width="740" height="630"></iframe>
</div>
<style>
#rightpanel {
background: green;
top: 32px;
left: 190px;
bottom: 0;
padding: 20px!important;
position: absolute;
padding-top: 0px;
overflow: auto;
min-width: 700px;
}
#silverlightControlHost {
background: red;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: 1;
right: 0;
bottom: 0;
}</style>
Related
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.
EDIT: here is the code I used:
<body>
<div class="Wrapper-Top">
</div>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
</body>
.Wrapper-Top {
min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background:url(img/header-bg.png)
repeat-x 50% 0%;
z-index: 20;
}
.Wrapper-Middle {
min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 160px;
left: 0px;
position: absolute;
z-index: 10;
text-align: center;
}
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
i think this is what you want..
<body>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
<div class="Wrapper-Top">
</div>
.Wrapper-Top{ min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
}
.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}
use position absolute both of this and give highest z-index value what you want to top of anothe one. like this
.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}
I have the following HTML:
<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>
And CSS:
.header {
position: absolute;
top: 0;
width: 100%;
height: 80px;
background-color: #f0f0f0;
}
.content {
margin: 30px;
background-color: #bcbcbc;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: #f0f0f0;
}
Header and footer look as I wish but now I'd like the content to fill all the space between them (with 30px margin all around). What should I add to it?
Thanks for any help.
Try height 100% on the content div.
Try this
.header, .content, .footer {
position: absolute;
}
.header{
top: 0;
width: 100%;
height: 50px;
background-color: #99CC00;
left: 0;
right: 0;
}
.content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
background-color: #FF6600;
}
.footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-color: #6600CC;
}
I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?
#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/
Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/
div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}
I have a top header <div id="header"></div>, a middle part <div id="content"></div> and a bottom footer <div id="footer"></div>.
Header and footer has fixed heights 50px. I want to fix the positions of header and footer on top and bottom and I want to stretch the middle part (content) to fill the remaining space.
How can I do this?
You can use position: absolute on footer and header an then position the footer with bottom: 0px. I would do it this way:
#header {
height: 50px;
width: 100%;
position: fixed;
top: 0px;
z-index: 2;
}
#footer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 2;
}
#content {
top: 50px;
width: 100%;
position: absolute;
z-index: 1;
}
I made it by defining the style as below;
#header, #content, #footer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 50px;
left: 0;
right: 0;
}
#content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
}
#footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
You can see my fiddle here
Thanks #rocky3000 and #Mika for support :)
Search for sticky footers LINK here on stackoverflow or with google and the problem is gone.