I would like to target a div with a class which is in another div with another class, this is basically what I want to do:
.footer {
position: sticky;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #2f2f2f;
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
.text-muted {
margin: 20px 0;
}
}
}
But I can't put class selectors inside others, shall I start using LESS or SASS or another kind of CSS framework ?
Regards,
you can make it like that using pure css:
.footer {
position: sticky;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #2f2f2f;
}
.footer .container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.footer .container .text-muted {
margin: 20px 0;
}
Related
I have a body containing two div's one is an absolutely positioned div and another one is a static default positioned div, i want the absolutely positioned div to take the full height of the screen which it takes but the problem that next arises is when i try to apply margin top to the statically positioned div, it also gets added to the absolutely positioned div.
How can I make the absolutely positioned div not get the margin of the sibling div ?
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
margin-top: 8rem;
}
<div class="div-1"></div>
<div class="div-2"></div>
The issue is that you have margin collapse on the body element. Margin collapse happens when there's no content separating parent and descendants elements (such as the body and .div-2). You can easily fix this by setting the display property of the body element to flow-root.
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
/* Set flow-root */
display: flow-root;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
margin-top: 8rem;
}
<div class="div-1"></div>
<div class="div-2"></div>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
position: relative;
}
.div-1 {
position: absolute;
border: 2px solid red;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 100vh;
z-index:1;
}
.div-2 {
height: 200px;
width: 90%;
background-color: blueviolet;
top: 8rem;
position: inherit;
}
Use top and position inherit instead of margin-top, check if it can be use.
I've tried many different 'sticky footer' techniques, but for some reason I cannot get this to work on my site: http://codeandco.net/services/
Any ideas?
Note: this is different to a fixed footer. I'm trying to get the footer to 'stick' to the bottom of the window, but underneath any of the page content - like this: http://getbootstrap.com/examples/sticky-footer/
add these 4 lines to #footer in your CSS
position: fixed;
bottom: 0;
left: 0;
right: 0;
Code below worked.
Note: the 'footer-push' was the key to getting this to work:
html, body {
height: 100% !important;
}
.wrapper {
min-height: 100% !important;
margin: 0 auto -75px !important; /* the bottom margin is the negative value of the footer's height */
}
footer, .footer-push {
height: 75px !important; /* '.push' must be the same height as 'footer' */
position: relative !important;
}
Some references from: http://ryanfait.com/html5-sticky-footer/
Here's the way: use this example.
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
And don't forget this:
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
If you need footer to be fixed, change footer style to this:
#footer {
background: #CCC;
color: #787878;
font-size: 13px;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
}
But don't forget to add padding for body:
body {
padding-bottom: 60px !important;
}
...or
main {
margin-bottom: 60px;
}
#footer
{
width:100%;
bottom: 0;
height: 20px;
float:left;
}
I'm trying to visually position a DIV (article header) outside of it's parent DIV (article) container. Is this possible?
My mark-up example is available here - http://codepen.io/calebo/pen/CGoyD
Try this:
.main {
background: tomato;
float: left;
width: 600px;
margin-top: 30px; /* above Layout adjustment */
/* removed overflow: hidden; */
/* use always clearfix method instead */
}
.article_header {
background: SteelBlue;
color: #fff;
position: absolute;
bottom: 100%;
margin-bottom: 10px; /* to neutralize padding of parent container */
left: -10px; /* to neutralize padding of parent container */
padding: 10px; /* to neutralize padding of parent container */
right: -330px; /* to neutralize padding of parent container */
}
.main > article{
position: relative;
}
.aside {
background: cyan;
float: right;
width: 300px;
margin-top: 30px; /* above Layout adjustment */
}
Working Codepen
To make adjustments, play with margin property.
You could do it like this:
.inner-wrap {position: relative; overflow: visible;}
.inner-wrap:after {content:""; display:table; clear:both;}
.article_header {position: absolute; width: 940px; left: 0; bottom: 100%;}
I've removed the overflow: hidden and replaced it with a clearfix method.
Some thing like this can be done
<div class="wrapper">
<h2>Desired effect</h2>
<div class="inner-wrap">
<div class="main">
<article>
<header class="article_header">article header - unknown height</header>
<section class="article_body">article body</section>
</article>
</div>
<div class="aside">aside</div>
</div>
</div>
CSS
body {
font-family: helvetica, arial, sans-serif;
}
.wrapper {
margin:0 auto;
width:80%;
}
h2 {
text-align: center;
}
.inner-wrap {
background: none repeat scroll 0 0 #CCCCCC;
margin: 41px auto 0;
position: relative;
width: 940px;
}
.inner-wrap > * {
padding: 10px;
}
.main {
background: tomato;
float: left;
width: 600px;
}
.article_header {
background: none repeat scroll 0 0 #4682B4;
color: #FFFFFF;
left: 0;
padding: 1%;
position: absolute;
top: -39px;
width: 98%;
}
.aside {
background: cyan;
float: right;
width: 300px;
}
jsfiddle : http://jsfiddle.net/w26yw/1/ i.e: http://jsfiddle.net/w26yw/1/show/
Here's the cleanest solution. It is basically the original #Mr_Green answer with a little fix.
.main > article {
position: relative;
}
.article_header {
background: SteelBlue;
color: #fff;
position: absolute;
bottom: 100%;
margin-bottom: 10px; /* to neutralize padding of parent container */
margin-left: -10px; /* to neutralize padding of parent container */
padding: 0px 10px; /* to neutralize padding of parent container */
width: 920px;
}
.inner-wrap {
background: #ccc;
width: 940px;
margin: 0 auto;
/* remove overflow: hidden */
}
Here's a working CodePen
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.