I have a div with the id of #container, I have another div inside og it with the id of #content. The #content div has a larger size than the #container div, and I need it centeret horizontally and vertically inside of the #container div.
HTML
<div id="container">
<div id="content">
</div>
</div>
The CSS I have tried is.
#container {
height: 300px;
width: 300px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#content {
height: 400px;
width: 400px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
Though the sizes of the divs in the example are static values, the height will be changing all the time, so a dynamic solution is needed.
You can position them absolutely and then use CSS3 transforms to drag them back into place.
JSfiddle Demo
CSS
#container {
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background-color: #663399;
}
#content {
height: 400px;
width: 400px;
position: absolute;
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background-color: rgba(255,0,0,0.5);
}
Related
This must be really simple but I'm stuck.
I have a header and below I have a full height/width block that is absolutely positioned. This will be a map but I have just used a coloured block to make it simple.
On top of this background I need the page that is 100% height in the middle. I thought I could use the z-index to show this on top of the absolutely positioned background but the page is always behind the 'bg' div
I know I'm missing something simple
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
z-index has no effect on statically-positioned elements (which is the default). It affects relative, absolute and fixed ("positioned") elements. A common hack would be to add position:relative to your .page.
To force an absolute positioned element for indexing you could use it in negative.
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.header{
background: black;
height: 50px;
width: 100%;
}
.bg{
background: red;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.page{
background: grey;
height: 100%;
margin: 0 auto;
width: 500px;
z-index: 10;
}
<div class="header"></div>
<div class="bg"></div>
<div class="page"></div>
I am trying to place a video on my page, which has to be responsive (16:9 all the time). I found a lot of examples, which are basically the same (applying 56.25% padding at the bottom). However, as soon as I apply a max-height and max-width to the iframe (because I don't want it to fill out the entire page), the content underneath starts to move away (because of the padding).
https://jsfiddle.net/12npu2zu/
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
Is there a way to keep it from doing that? The maximum width is 1000px and the maximum height is 563px (16:9).
Is this what are you looking for, i just wrapped all this in one more div and added same style.
<div class="video-holder">
<div id="video-container">
<iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen> </iframe>
</div>
<p>This should stay right underneath the video</p>
</div>
CSS:
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
.video-holder{
display: inline-block;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
https://jsfiddle.net/326w5jqj/
So what I ended up doing was placing a transparent image in the container. Then I applied this CSS to all the items:
#video-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
img {
display: block;
opacity: 0;
width: 100%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
See it yourself: https://jsfiddle.net/12npu2zu/2/
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>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
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.