position bottom for a div

**mlegg** · 01-21-2016, 03:59 PM

On this page 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.

Click image for larger version.

Name: footer.jpg
Views: 170
Size: 31.1 KB
ID: 5795

css code for social bar is

Code:

#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;

Code:

#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

Code:

<!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

Code:

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:

Code:

text-align:center;
position: absolute;
bottom: 0;
left:0;
right:0;
padding:.5em 2%;

and putting this in the body

Code:

<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

Originally Posted by Beverleyh

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.