Log in

View Full Version : position bottom for a div


mlegg
01-21-2016, 03:59 PM
On this page (http://mommalies.com/) that I am making for a friend I would like to get the social div to be at the very bottom, in the white container, above the footer.

5795

css code for social bar is

#social {
margin: 0 auto;
text-align:center;
position: static;
bottom: 0;
padding:.5em 2%;
}
Beverleyh
01-21-2016, 04:13 PM
This will put it at the bottom of its container div;
#social {
text-align:center;
position: absolute;
bottom: 0;
left:0;
right:0;
padding:.5em 2%;
}However, there is currently no content in your container div to push the height down. Try adding a min-height to the container div so that its height somewhat matches the white background image.
mlegg
01-21-2016, 04:42 PM
I added that Beverly but I'm still getting the same thing even with a css refresh.
Here is the full HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="MommaLies">
<meta name="keywords" content="MommaLies">
<title>mommalies</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
<link rel="SHORTCUT ICON" href="images/favicon.ico">
</head>
<body>
<div id="container">
<img id="logo" src="images/banner.jpg" alt="mommalies logo">
<!-- Start css3menu.com BODY section -->

<!-- End css3menu.com BODY section -->
<div id="content">
<h1>Our new website will be up soon!</h1>
<div id="social">
<a href="https://www.facebook.com/" target="_blank"><img src="images/3D-FB.png" style="max-width:100%;height:auto;"></a>
&nbsp; &nbsp;
<a href="mailto:kristin@mommalies.com"><img src="images/3D-email.png" style="max-width:100%;height:auto;"></a>
</div>
<div style="clear:both;"></div>
</div></div></div>
<div id="footer">Copyright &copy; mommalies</div>
</body>
</html>
mlegg
01-21-2016, 04:43 PM
Here is the full css


html {
height:100%;
}

body {
width:100%;
height:100%;
min-height:100%;
margin:0 auto;
font-family:'Georgia',Times New Roman;
font-size:100%;
background-color:#007F7D;
color: #000000;
}

#vlb1overlay {z-index:100 !important;}
#container {
width:90%;
margin:auto;
background-color:#fff;
min-height: 100%;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
#logo {
display:block;
width:100%;
}

#content {
clear:both;
position:relative;
padding:1.5em 5%;
height:100%;
}

a:link {
text-decoration: underline;
}

a:visited {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

h2 {
clear:both;
text-align:center;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}

.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}

#left {
float: left;
width: 32%;
padding:5px;
}

#middle {
float: left;
width: 32%;
padding:5px;
}

#right {
float:left;
width:32%;
padding:5px;
}

.columns {
width:100%;
}
.left{
float:left;
width:480px;
}
.right {
margin-left:360px;
min-width: 250px;
}
.clear {
clear:both;
}

/* Flexible iFrame */

.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#map {
height: 100%;
}
#social {
text-align:center;
position: absolute;
bottom: 0;
left:0;
right:0;
padding:.5em 2%;
}

/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
#footer {
background:#007F7D;
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#footer a {
color:#fff;
text-decoration: underline;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Beverleyh
01-21-2016, 05:22 PM
The direct container/parent of #social. And it needs to be an explicit min-height such as 20em; Otherwise, it is working.
mlegg
01-21-2016, 05:43 PM
I'm not understanding what you are saying. Sorry.
Beverleyh
01-21-2016, 06:42 PM
Put an explicit min-height (eg 20em) on the parent div of #social

The CSS I gave you to pin #social to the bottom of the content area does work, it's just that there is no height to the content area at the moment to see the effect.
mlegg
01-21-2016, 09:24 PM
I got it thanks.
molendijk
01-21-2016, 09:35 PM
Am I allowed to add some remarks?
There is an error in your HTML (post #3). There's a </div> too much, and your social section is at the wrong place. Keeping your CSS as it is:

text-align:center;
position: absolute;
bottom: 0;
left:0;
right:0;
padding:.5em 2%;
and putting this in the body

<div id="container">
<img id="logo" src="images/banner.jpg" alt="mommalies logo">
<!-- Start css3menu.com BODY section -->

<!-- End css3menu.com BODY section -->
<div id="content">
<h1>Our new website will be up soon!</h1>

<div style="clear:both;"></div>
</div></div>
<div id="social">
<a href="https://www.facebook.com/" target="_blank"><img src="images/3D-FB.png" style="max-width:100%;height:auto;"></a>
&nbsp; &nbsp;
<a href="mailto:kristin@mommalies.com"><img src="images/3D-email.png" style="max-width:100%;height:auto;"></a>
</div>
<div id="footer">Copyright &copy; mommalies</div>
should produce the result you want.

Note also that giving a bottom position to a div only makes sence if the element has position: absolute or position: fixed (as opposed to your original position: static).
bojangles
01-22-2016, 06:44 AM
This will put it at the bottom of its container div;
Code:
#social {
text-align:center;
position: absolute;
bottom: 0;
left:0;
right:0;
padding:.5em 2%;
}


This worked for me too Beverleyh. Upvoting this answer seeming it worked for mleg too.