I have two divs, top div has style as follows:
.context_left {
float:left;
display:inline-block;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
}
while that the div below it has style:
.footer {
width:100%;
height:54px;
display:block;
position: absolute;
margin-top:80px;
left:0;
}
when the div context_left changes it's height the div footer remains at it's position, I want to move the footer div down if context_left div changes it's height. Can anyone please help me to do it?
Did you try to add this lign to your .footer
clear:both;
And delete
position: absolute;
You have set your footer with position: absolute;. That means your footer should be kinda fixed, but inheriting from its parent.
Try changing absolute to relative and see if that is what you want.
.footer {
width:100%;
height:54px;
display:block;
margin-top:80px;
left:0;
}
Removed the position: absoulte from footer. Try this. Because the footer will remain at the same position till position:absolute remains in style.
Css:
.context_left {
float:left;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
display:inline-block;
}
.footer {
width:100%;
height:54px;
display: block;
clear:both;
margin-top:80px;
left:0;
}
Working Fiddle: http://jsfiddle.net/dMawS/show
If a sticky footer at the bottom of the page is, what your looking for, then this can help you:
html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* the margin compensates the footer plus the footer's top margin */
margin: 0 0 134px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 54px;
}
The footer will always be at the bottom of the browser's viewport or below the content.
Demo
Try before buy
Related
I have a confirm box and I want to show it in the middle of my screen.
margin 0 auto does not solve my problem.
How can I center it?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
It's because the element is fixed.
You need to add left: 0;/right: 0 in order for the element to be centered (in combination with margin: 0 auto). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.
Updated Example
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action
(Demo)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
Margin: 0 auto; will not work until you will not provide left:0; and right:0
check fiddle for working example :https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
Hi everyone my tutorial has a tree div for now. Header,container and footer. header is fixed. but if you check it in JSFiddle you see container div has a problem lags behind the header div i can not solv the problem. what can i do in my css code?
This is HTML code:
<div class="globalHeader">
<div class="globalheader-in"></div>
</div>
<div class="global_container">
<div class="container">
1 <br>2 <br>3 <br>4 <br>5 <br>
</div>
</div>
And CSS code:
.global_container {
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
}
.container {
float:left;
width:981px;
height:100px;
background-color:red;
}
.globalHeader {
width:100%;
height:40px;
position:fixed;
background-color:#2a3542;
z-index:99999;
}
.globalheader-in {
width:981px;
height:40px;
margin-left:auto;
margin-right:auto;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
Using a spacer
You can push the content of container down by adding a spacer element as the first child of the container.
.container:before {
content: ' ';
display: block;
height: 40px; /* equal to the height of the header */
}
WORKING DEMO.
Using top padding
You can also use padding-top for the container to achieve that:
.container {
width:981px;
height:100px;
/* other styles... */
padding-top: 40px;
}
WORKING DEMO.
However If you want to keep the height of the container as 100px, you should use box-sizing: border-box to calculate the height of the container including paddings and borders, as follows:
.container {
width:981px;
height:100px;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO
I would do it like this:
http://jsfiddle.net/8eSAU/5/
.global_container{
clear:both;
position: relative;
top: 40px;
}
It was not working, because you simply hid the text beneath the fixed element.
Kolay gelsin :)
Why not add:
position:relative;
top:40px;
To .global_container {
Demo Fiddle
This assumes you wish the header to scroll with the content, in which case all you need to do per the demo is offset the top of the content by the height of the header, so it initially displays below it.
A simple padding-top will take care of that.
JSFiddle
.global_container{
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
padding-top:40px; /* heigt of fixed header */
}
you can add padding-top to the .global_container or body
padding-top should be same as height of header.
Please find the link below for the Fiddle
Add the following to global_container class
position:absolute;
top:47px;
FIND FIDDLE HERE
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I have this code.
Wish div align blue with red div without affecting the rest of the page.
Notice that the div#leftcontent not go to the bottom of the page and I'm not understanding why.
Maybe the solution is to put the div#leftcontent aligned to the bottom of the page. But how?
Thanks.
you have to change the red div:
bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/
check this out: http://jsfiddle.net/85unG/48/
and for the height, the reason the its not touching the bottom is:
div#wrap {
height: 768px; /should be 739 px;/
}
CSS absolute positioning to the rescue!
First ditch the fixed height and the overflow:auto for div#wrap. Replace overflow:auto with overflow:hidden:
div#wrap
{
width:1024px;
/*height:768px; /* Forget about it! */
margin:5px auto;
border:2px solid #ccc;
/*overflow:auto;/* Forget about it! */ overflow:hidden;
position:relative;
}
... now note that div#wrap has a relative position:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative; /* AWESOME */
}
This means div#wrap is non-statically positioned, so we can position things absolutely within it... like div#footer and div#social-networks:
div#wrap div#leftcontent div#footer {
position:absolute;
bottom:0px;
}
div#wrap div#nav div#social-networks {
position:absolute;
bottom:0px;
}
This will position the bottom edge of div#footer and div#social-networks 0px away from the bottom edge of its non-statically positioned ancestor - namely, div#wrap.
Bad news though: positioning things absolutely can screw up the natural flow of things, so you have to manually reserve some space for div#footer and div#social-networks. Do this with padding:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative;
padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}
I've made a footer wrap outside the content wrap (which everything else is in). I would like to make the footer wrap extend to fill the width of the page and I would like it to be fixed on the bottom. Here's the code:
footerWrap {
background-color:#000;
width: auto;
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
border:#000 inset medium;
}
The website is item9andthemadhatters.com please let me know if you need any other code or info. Thanks!!
update:
html {
padding:0;
height:100%;
width: 100%;
}
body{
margin: -1px 0 0 0;
background-color:#FFF;
font-family: calibri;
background-image:url(images/item9HeaderSideFiller.gif);
background-repeat: repeat-x;
padding:0;
height:100%;
width: 100%;
}
wrap {
width: 965px;
margin:auto auto;
min-height:462px;
max-height:4000
px;
footerWrap {
background-color:#000;
position:absolute;
bottom:0;
width:100%
}
footer {
margin: auto;
text-align:center;
width:965px;
height:150px;
background-color:#000;
}
}
To fill the page
width:100%
To stay at the bottom of the page a solution could be
position:absolute;
bottom:0;
notice that in both body and html you have to set
padding:0
height:100%;
Try width:100% in footerWrap. Also, what do you mean by fixed on the bottom? Do you mean the footer should always be at the bottom of the screen, even when scrolling? Or do you mean it should always be at the bottom of the page?