This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I am having an issue with my homepage - I do not have enough content for a fullpage and I am trying to set the position of this section above the footer at the bottom.
I had success with using positon: fixed; and bottom: 50px; to sit above my footer, however when I was opening the navigation on an ipad, the navigation would disappear behind the section.
I'm not sure how to tackle the problem, I was attempting to use vertical-align: bottom; but could not get it to work.
My CSS:
section.hero {
max-height: 400px;
text-align: center;
img.hero-responsive {
width: 100%;
height: 100px;
}
h2 {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
top: -90px;
font-weight: 800;
position: relative;
}
h3 {
position: relative;
top: -60px;
font-weight: 800;
}
}
section.info {
background-color: #464646;
height: auto;
position: relative;
top: -50px;
width: 100vw;
padding: 0px;
left: -5px;
text-align: center;
color: white;
padding-bottom: 50px;
.row {
margin: 0px !important;
padding: 0px !important;
.col-lg-3 {
border-top: 2px solid rgba(160, 160, 160, 0.8);
margin-top: 5px !important;
padding: 0px !important;
i {
font-size: 40px;
padding: 10px;
margin: 25px !important;
padding: 0px !important;
}
i.laravel { color: #f05340; }
i.wordpress { color: #21759b; }
i.sass { color: #cd6799; }
img {
width: 50px;
height: 40px;
margin: 10px !important;
padding: 0px !important;
}
h2 {
margin: 0px !important;
padding: 0px !important;
}
p {
width: 95%;
margin: 0px auto 0px auto !important;
padding: 0px 0px 10px 0px !important;
}
}
}
}
#media only screen and (min-width: 768px) {
section.hero {
img.hero-responsive {
width: 450px;
}
h2 {
width: 400px;
top: -80px;
}
}
section.info {
top: auto;
position: absolute;
}
}
#media only screen and (min-width: 1000px) {
section.hero {
h3 {
top: -30px;
}
}
section.info {
min-height: 500px;
position: unset;
margin-left: -5px;
}
}
codepen: https://codepen.io/aparker611/pen/bGbQdqg
codep: https://codepen.io/aparker611/pen/bGbQdqg
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You can try using flexbox. if you share a codepen or a full example it will more easy to help you
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
https://codepen.io/centrodph/pen/gOYQpBL
I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>
I have a web page: http://www.svaspasalon.com/construct2/index.html my issue is that when I load my style sheet the back part such as the image and the page load fine and dont have an issue however the middle element ( the black transparent background text and email reminder) always moves when I load it on different screens, e.g. my laptop and my desktop at home. how can I get the element to not move and also move the Sva Spa Salon and the element to the center of the page.
CSS:
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p ,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-
spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-
weight:normal;}li{list-style:none;}caption,th{text-
align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
html,body{
width:1080px;
height:1920px;
position: fixed;
}
body{
margin:0 auto;
padding:0;
background:#2a1a10;
font-family:"Helvetica Neue",Helvetica, Arial;
font-size: 100%;
}
/*
div#shim{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: 375px;
float: left;
position: relative;
}
*/
.fadein {
position: fixed;
max-width: 100%;
width: 100%;
min-width: 500px;
z-index:-1;
}
.fadein img {
position:fixed;
max-width: 100%;
width: 70%;
min-width: 500px;
height: 80%;
margin-top: 90px;
margin-left: 255px;
}
/*
div#content {
width: 100%;
height: 160px;
margin: 0 auto;
background: url(../images/content_bg1.png) left bottom repeat-x;
float: left;
position: relative;
top: -80px; */
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
.logo{
width: 78.125%;
/* width: 800px; */
margin: 0 auto;
}
h1{
font-size: 36px;
color: #C5953b;
margin-bottom: 19px;
letter-spacing: -2px;
font-weight: 1000;
text-shadow:-2px -2px 2px #fff, 2px 2px 2px #000;
text-transform: uppercase;
text-align: center;
}
h2{
padding: 0px 3px;
line-height: normal;
background: #fff;
font-size: 16px;
font-weight: 700;
float: left;
text-transform: uppercase;
}
h1 span{
font-weight: 500;
}
.clear{
clear: both;
}
.right_side{
width: 85%;
/* width: 940px; */
margin: 0 auto;
}
.right_content{
width: 100%;
/* width: 920px; */
background: url(../images/blackish.png) repeat;
height: 50px;
padding: 23px 0 23px 40px;
font-family:Candara;
}
.right_content h2{
margin-top: 12px;
margin-right: 60px;
}
form.email{
padding: 0;
margin: 10px 0 0 0;
width: 204px;
float: left;
}
/*.get_notified{
width: 144px;
line-height: normal;
background: url(../images/field.png) left top no-repeat;
font-family:Candara;
font-size: 11.4px;
color: #FF0000;
border: none;
padding: 7px 10px;
margin-right: 6px;
float: left;
font-weight: 200;
letter-spacing:0.4px;
}
*/
.go{
padding: 10px;
margin: 0 auto;
width: 34px;
height: 28px;
border: none;
background: url(../images/go.png) left top no-repeat;
}
.go:hover{
background: url(../images/go.png) left bottom no-repeat;
cursor: pointer;
}
html, body {
min-width: 1080px; /* width: 1080px; */
/* height: 1920px; */
/*position: fixed;*/
}
I have two DIVs inside another two parent DIVs. What I am looking to do is align the "clocks" DIV to the left of the "panel" DIV and the "sd" DIV toward the center of the "panel" DIV.
What is showing up as now:
What I am looking to do:
My HTML looks like:
<div id="weather">
<div id="panel">
<div class="clocks">
</div>
<div id="sd">
<script type="text/javascript" src="http://www.weathers.com"></script>
</div>
</div>
<p class="slide">Weather</p>
</div>
My CSS looks like:
#weather {
margin: 0 auto;
padding: 0;
width: 990px;
font: 75%/120% Arial, Helvetica, sans-serif;
top: 0;
position: absolute;
z-index: 999999999;
left: 0%;
margin-left: 0px;
}
#panel {
background: url('weatherBack.png') no-repeat;
height: 195px;
width: 990px;
display: none;
text-align: center;
margin: 0 auto;
line-height: 195px;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(btn.png) no-repeat center top;
}
.btn-slide {
background: url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
.learn {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
.box-cnt {
padding: 10px;
padding-bottom: 2px;
background-color: #1FAAEB;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
.clocks {
width: 209px;
height: 131px;
position: relative;
top: 0;
left: 151;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
Try the float property with a value of left on your clock and weather panels:
.clocks {
width: 209px;
height: 131px;
position: relative;
float: left;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
position: relative;
float: left;
}
Here is a working JSFiddle link: http://jsfiddle.net/cYFfT/
If you want to have more space between them, simply set a left margin on the SD panel,
as in this update: http://jsfiddle.net/cYFfT/1/
I have a following div structure
<div id="wrapper">
<div id="header">
<div id="storeFinder">
/* html goes here */
</div>
</div>
</div>
now when i zoom in or out from the browser, "storeFinder" moves right / left ...
I have searched online and found that need a wrapper around the "storeFinder" so that it does not move with the <body> and specifying the min-width also can solve the problem.
in my case, i already have a wrapper div and specifying the min-width also dint help me.
looking for help here very badly.
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storefinderdropdown {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try putting a position: relative on the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your correct CSS code Working Jsfiddle here
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storeFinder {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0px;
left:342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try this:
#storefinderdropdown {
position: absolute;
top: 8px;
left: 342px; /*Add This*/
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0; /* Change This*/
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
May be this will be helpful for you.