Help! Footer Issues

jezebel · 03-10-2013, 10:57 PM

I need help with the footer for a basic code. I can't seem to figure out how to make the vertical mini-line below and centering the links on the bottom of the footer. I just can't seem to get it right. Thank you so much for reading through this and helping me out. Thank you!

This is what I have got thus far:
[CODE]
<!DOCTYPE HTML>
<html>

<head>
<title>Verkefni 6 - Uppsetning vefsíðu</title>
<link href="verkefni6.css" rel="stylesheet" />
</head>
<body>
<div id="container">

<header>
<h1>Halldór Laxness</h1>
</header>

<section>
<img class="right" src="laxness.jpg" width="90"/>
<p>Halldór (Kiljan) Laxness (fæddur Halldór Guðjónsson 23. apríl 1902, dáinn 8. febrúar 1998) var íslenskur rithöfundur og skáld, jafnan talinn einn helsti íslenski rithöfundurinn á 20. öld.</p>
<p>Halldór var sonur Sigríðar Halldórsdóttur (fædd 1872) og Guðjóns Helgasonar (fæddur 1870). Fyrstu æviárin bjó hann í Reykjavík en flutti að Laxnesi í Mosfellssveit árið 1905. Hann tók fljótt að lesa bækur og skrifa sögur, og þegar hann var 14 ára gamall fékk hann sína fyrstu grein birta í Morgunblaðinu undir nafninu H.G. Ekki löngu síðar birti hann grein í sama blaði undir sínu eigin nafni og var sú grein um gamla klukku.</p>
<p><img class="left" src="laxness2.jpg" width="120"/> Á ferli sínum skrifaði Halldór 51 bók, margar blaðagreinar, samdi ljóð, leikrit og fleira. Halldór hlaut Nóbelsverðlaun í bókmenntum árið 1955. Hann var tvíkvæntur og eignaðist fjögur börn. Frá árinu 1945 átti Halldór fast heimili á Gljúfrasteini í Mosfellssveit. Að frumkvæði Davíðs Oddsonar, forsætisráðherra keypti ríkissjóður Gljúfrastein af Auði Laxness, ekkju Halldórs, og opnaði þar safn til minningar um skáldið haustið 2004. Auður gaf safninu innbú þeirra hjóna.</p>

</section>

<footer>
<p class="left"><a href="http://www.gljufrasteinn.is">Gljúfrasteinn - Hús skáldsins</a></p>
<p class="right"><a href="http://www.mbl.is/serefni/laxness">Sérefni Morgunblaðsins um Halldór Laxness</a></p>
</footer>

</div>

</body>
</html>
[CODE]

[CODE]
body
{
background-color: GoldenRod;
}

h1
{
font-family: Courier New;
font-style:italic;
color: saddlebrown;
font-size: 45px;
text-align: center;
}

#container
{
position: relative;
width:800px;
border: solid;
margin: auto;
height: 650px;
padding: 10px;
background-color: white;
border-color: Saddlebrown;
box-shadow: chocolate 10px 5px 5px;
border-radius: 20px;
}

header
{
width:600px;
margin: auto;
border-bottom: SaddleBrown solid;
}

section
{
margin: 50px;
}

footer
{
width:600px
height: 100px;
margin: center;
clear: both;
border-top: SaddleBrown solid;
}

.left
{
float: left;
margin: 5px;
}

.right
{
float: right;
margin: 5px;
}

p
{
font-family: Courier New;
color: saddlebrown;
font-size: 16px;
text-align: justify;
}

a
{
color: saddlebrown;
}

img
{
margin: 5px 5px 5px 5px;
}
[CODE]

In the attachments there is a Print Screen shot of what the coding is supposed to look like. I really appreciate the help. Thank you very much!

Excavator · 03-11-2013, 01:26 AM

Hello jezebel,
Look at it this way -

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
		/* HTML5 tags */
		header, section, footer,
		aside, nav, article, figure {display: block;}
#container {
	width: 800px;
	margin: 0 auto;
	padding: 400px 0 0;;
	background: #999;
}
footer {
	width: 700px;
	margin: 0 auto;
	overflow: auto;
	border-top: 2px solid #fff;
}
	footer a {
		padding: 10px 0;
		display: block;
		text-align: center;
		color: #fff;
		font-size: 0.8em;
	}
		footer a.left {
			width: 348px;
			margin: 2px 0 0;
			float: left;
			border-right: 2px solid #fff;
		}
		footer a.right {overflow: auto;}

</style>
</head>
<body>
    <div id="container">		
		<footer>
			<a href="http://www.gljufrasteinn.is" class="left">Gljúfrasteinn - Hús skáldsins</a>
			<a href="http://www.mbl.is/serefni/laxness" class="right">Sérefni Morgunblaðsins um Halldór Laxness</a>
		</footer>
    <!--end container--></div>
</body>
</html>

Based on this 2-column demo
and this bit of HTML5 implementation