I succeeded to put div at the bottom with this code:
#div {
position: absolute;
width: 100%;
height: 58px;
margin: 0 auto;
bottom: 0;
left: 0;
overflow: hidden;
}
Recently, I added a side-bar to my site (300px).
When the side-bar opens, the whole site move left 300px, except for the div in the bottom.
I found that if I delete the position: absolute; from the css, the div will move left like all the elements in the site, but the div will not be in the bottom.
There is a way to move the div when the sidebar open like the all site and also be in the bottom of the page?
Thanks in advance
div{
position:fixed;
bottom:0;
}
If you want to center divs inside a div ,there's an example
HTML
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
CSS:
div.parent{
border:1px solid black;
padding:25px;
text-align:center;
}
div.children{
border:2px solid blue;
background-color:orange;
width:25%;
display:inline-block;
height:250px;
}
Other way to center only 1 div inside another div looks like that
HTML
<div class="parent">
<div class="children">Woho</div>
</div>
CSS
div.parent{
border:1px solid black;
padding:25px;
}
div.children{
border:2px solid blue;
background-color:orange;
width:250px;
margin:0 auto;
}
The margin:0 auto; property makes your div to go in the center.
Related
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
This is my first time posting here. Been a long time fan coming here every once in a while, hopefully someone can lead me to the right direction. I have an image file that I am unable to move anywhere. The image file is in a div that is in a tag that I want positioned to the bottom right of the div. I have used top-margin and left margin to no avail it is always just sitting there in the same position. Below is the code that pertains to the problematic area. Html part followed by the css part.
<div id = "container">
<section id = "content">
<article>
<div id ="monkey_img"><img src="images/cartoon-monkey_1.png" width="250" height="252"></div>
</article>
</section>
<aside id="sidebar">
<p>Monkey</p>
</aside>
</div>
<!--css-->
#content{
width: 600px;
height: 475px;
background-color: #FFF;
border-style: solid;
border-width: 2px;
float:left;
margin-right:30px;
}
#monkey_img{
width:500px;
height:425px;
margin-top:100px;
margin-left:100px;
display:block;
}
#container{
width:1000px;
height:550px;
margin:auto;
margin-top:65px;
}
#container p{
padding:15px;
}
#sidebar{
width 275px;
height:475px;
background-color:#FFF;
border-style:solid;
border-width: 2px;
margin-left:30px;
overflow:auto;
}
You'll probably want to set {position: relative} on the parent, and {position: absolute} on the element you're trying to move. You can then set top/right/bottom/left as you see fit.
http://jsfiddle.net/XemPh/2/
#monkey_img {
width:200px;
height:200px;
background-color: #eee;
position: relative;
}
#monkey_img img {
position: absolute;
right: 0;
bottom: 0;
}
<div id="monkey_img">
<img src="http://placehold.it/100x100" />
</div>
In this example I've applied the styles directly to the image, but you could do the image's wrapper and that element's parent as well.
I am using a fluid layout design and I want the div with class center to be centered horizontally inside of the div with class outer. I tried this, but it doesn't work. What am I doing wrong?
HTML:
<div class="outer">
<div class="inner"> // this div has height=0. Why?
<div class="center">
// stuff
</div>
</div>
</div>
CSS:
.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
}
.inner {
width:100%;
}
.center {
margin:0 auto;
}
use a percentage for margin-left, e.g:
.center
{
width:90%;
margin-left:5%;
}
the reason I used 5% is because since the width of center is 90% of it's container, we have 10% of space remaining, so to center it you'll have to bring it over to the left by half of the available space; which in this case is 5%
You've gotta treat the inner as if it's a regular div in a page, so something like:
#inner {
position:fixed;
top: 50%;
left: 50%;
width:234px;
height:90px;
margin-top:-45px; /*set to a negative number 1/2 of your height*/
margin-left:-117px; /*set to a negative number 1/2 of your width*/
border: 0.5px solid #ccc;
}
This would do the trick and you can adjust accordingly .
Inline-block is probably the best option for the centered div, then use our outer div with text-align:center to center the inner container. You don't really need an inner and a center div the way you have it, but I kept it in for examples sake. Below is a fiddle link:
http://jsfiddle.net/UYw8S/2/
Borders and padding added for example.
<div class="outer">
<div class="inner">
<div class="center">
Inner stuff
</div>
</div>
</div>
.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
background:#ccc;
border:1px solid #333;
}
.inner {
display:block;
margin:10px;
border:1px solid #333;
text-align:center;
}
.center {
margin:10px 0;
text-align:left;
height:40px;
width:80%;
display:inline-block;
background:#fff;
padding:10px;
}
Say logo1 and logo2 is 100px long each and I want to cover half of the logo up.
Whats the best way and neatest way of making two logos over lap and making them in the center of page.
Put both your logos in a <div> and give it margin: 0 auto;.
Then give logo2 z-index: 1; so that it is layered on top of logo1.
Here's a JSFiddle demo.
Page:
<div class="center">
<img src="Link/To/Your/Image/For/Logo1" id="logo1" />
<img src="Link/To/Your/Image/For/Logo2" id="logo2" />
</div>
CSS:
.center {
width: 210px;
margin: 0 auto;
position: relative;
left: 10px;
}
#logo2 {
z-index: 1;
position: relative;
left: -10px;
}
If you make the logos overlap even more (e.g. move logo2 to overlap by 50px with left: -50px; then you must also change the position of the surrounding div to match the overlap with left: 50px;, so the the left positioning for #logo2 and .center should be the same but opposite.
One option is using the style position:absolute;. Following is an example.
<style>
.container{
border:solid 1px red;
text-align:center;
height:500px;
}
#logo1, #logo2{
width:100px;
height:100px;
display:inline;
position:absolute;
top:200px;
}
#logo1{
border:solid 1px green;
left:450px;
}
#logo2{
border:solid 1px blue;
left:540px;/*note 540 = 450 + (100 - 10)*/
}
</style>
Page:
<div class="container">
<div id="logo1"></div>
<div id="logo2"></div>
</div>
Hi all I am having trouble getting my footer to stick to the bottom of the page. I have followed all the usual advice but my left column seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page. I have a fairly complicated layout since I have a fair amount of collapsible panels via jQuery but I'll give you the basic structure.
Basic HTML:
<html>
<head></head>
<body>
<div id="container">
<div id="content_header"> <!-- collapsible top panel -->
</div>
<div id="show_content_header"> <!-- tab shown to expand top panel when minimized-->
</div>
<div id="content_left_panel"> <!-- collapsible left panel -->
</div>
<div id="show_left_panel"> <!-- tab shown to expand left panel when minimized -->
</div>
<div id="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
And the CSS:
body
{ height: 100%;
margin:0;
padding:0;}
html, body, #container { height: 100%; }
body
#container { height: auto; min-height: 100%; }
#content_header
{ position:fixed;
width:100%;
left:0;
height:200px;
background:url(../images/image.png) repeat-x;
border:1px solid #000;
z-index: 100; }
#show_content_header
{ position:fixed;
z-index:2;
display:none;
width:100%;
height:40px;
top:40px;
left:0; }
#content_left_panel
{ position: absolute;
top: 235px;
left: 0px;
width: 200px; /*Width of frame div*/
height: auto; /*usually 100%*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
z-index:0;}
#show_content_left_panel
{ position:fixed;
left:0;
float:left;
padding-top:5px;
display:none;
width:0px;
height:30px;
cursor:pointer;
top:90px;}
#main_content
{ position: relative;
margin-left:210px;
margin-top: 235px;
margin-right:10px;
margin-bottom: 100px;
height: 100%;
overflow: hidden;
z-index:0;}
#footer {
position: relative;
z-index: 100;
height: 100px;
margin-top: -100px;
width:100%;
background:url(../images/image.png) repeat-x;
clear: both;}
As I said my footer remains at the bottom of page when the 90% of the time, but as soon as the #content_left_panel exceeds the height of the main content then the footer no longer remains at the bottom of the page, rather it is rooted to the bottom of the container div. I am confused as the #content_left_panel is breaking out of the container I am guessing it is something to do with it being a float!
Any help is much appreciated!
Cheers
I don't really understand what kind of layout you want but #content_left_panel has position:absolute; rule, so
It is removed from the normal flow entirely
(http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning)