Snippet of HTML Code:
<body>
<!-- Social Media Icons -->
<div id="sm1"><a href="/"><img src="images/facebook.png" height=40 width=40></img></a>
</div>
<div id="sm2"><a href="/"><img src="images/twitter.png" height=40 width=40></img><a></div>
<!-- Logo -->
<div id="logo"><img src="images/logo.png"</img></div>
<div id="slogan"><blockquote>Insert slogan here...</blockquote></div>
<!-- Slideshow -->
<div id="slideshow"></div>
<!-- Box -->
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
<!-- Footer -->
<div id="footer">
<div id="footerimg">
<center>
<img src="images/facebook.png" height=20 width=20></img>
<img src="images/twitter.png" height=20 width=20></img>
</div>
<div id="footertext">
© 2014 My Designs. All Rights Reserved.
</div>
</div>
CSS Styling:
body {
position:absolute;
margin-left:100px;
}
blockquote {
font-style:italic;
}
#logo {
position:absolute;
width:150px;
height:40px;
margin-top:20px;
}
#sm1 {
position:absolute;
width:40px;
height:40px;
margin-top:20px;
margin-left:650px;
}
#sm2 {
position:absolute;
width:40px;
height:40px;
margin-top:20px;
margin-left:710px;
}
#slideshow {
width:750px;
height:400px;
background-color:purple;
margin-top:80px;
}
#box1 {
background-color:aqua;
}
#box2 {
margin-left:190px;
background-color:fuchsia;
}
#box3 {
margin-left:380px;
background-color:gray;
}
#box4 {
margin-left:570px;
background-color:green;
}
#footer {
width:750px;
height:50px;
background-color:olive;
position:absolute;
margin-top:140px;
text-align:center;
font-family:sans-serif;
}
#slogan {
position:absolute;
margin-left:120px;
margin-top:15px;
}
#footerimg {
margin-top:5px;
}
#footertext {
color:white;
}
.boxes {
margin-top:10px;
position:absolute;
width:180px;
height:120px;
}
I need assistance in centering the content within <body></body> and <footer></footer>. I have tried various solutions without success. Experts, please help optimize my code layout for better appearance.
Thank you! Visit the JSFiddle link here.