My challenge is to position the Social Icons at the bottom of the screen and align the Image Gallery in the middle. However, the social Icons keep moving to the center of the screen and the Image gallery ends up overlapping them, making it difficult for me to keep it at the bottom.
Every time I make an addition to the page, it seems to impact the positioning of the social icons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="icon" type="image/png" href="images/ace.png"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="example/imageStyle.css" rel="stylesheet" type="text/css" media="all" />
<link href="example/jphotogrid.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="jphotogrid.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="example/jphotogrid.js"></script>
<script src="example/jflickrfeed.js"></script>
<script src="example/setup.js"></script>
</head>
<body>
<div class="header">
</div>
<span class="menu-Trigger" align="center" >☰ Menu</span>
<div class="nav-menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href=#>VIDEOS</a></li>
<li class="current"><a href="Images.html">IMAGES</a></li>
<li><a href=#>EVENTS</a></li>
<li><a href=#>TESTIMONIALS</a></li>
<li><a href="Contact.html">ENQUIRIES</a></li>
</ul>
</div>
<div class="main">
<ul id="pg">
<li>
<img src="http://farm4.static.flickr.com/3647/3435384001_9ed9864bb4.jpg" alt="DSC_0660">
<p>DSC_0660</p>
</li>
...
<!-- More images and descriptions -->
...
</ul>
</div>
<section>
<div id="middle">
</div>
</section>
<div class="sI">
<div class="icons">
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
<a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/MagicArsh" title="Arshdeep Soni on Facebook" alt="Facebook"><img src="images/social/fb.png" /></a>
<a class="socialIcons" href="http://twitter.com/ArshSoni" title="Follow Arshdeep on Twitter" alt="Twitter"><img src="images/social/twitter.png" /></a>
</div>
</div>
</body>
</html>CSS:
<style type="text/css>
body {
background-color: black;
}
.icons {
text-align: center;
position:absolute;
bottom:0px;
left:0;
width: 100%;
border:2px solid red;
}
.main {
width: 700px;
margin: 0 auto;
text-align: left;
}
#middle {
height:100px;
}
</style>JSFIDDLE: https://jsfiddle.net/dzx9v25b/