How to make a 3 column footer?

HTML & CSS
,
1

1252×1074 118 KB

Here is my HTML code:

<div id="footer">
<div class="wrapper">



<p class="left">
    <h2>Contact Us:</h2><br />
    <strong>Mailing Address:</strong><br />
	P.O. Box 168 <br />
	Yellowstone National Park,<br />
	WY 82190-0168<br />
	<strong>Phone:</strong><br />
	(307) 344-7381</p>			<!-- close left footer -->
   
    <p class="right">
    <img class="FAQ" src="icons/FAQ.png">FAQ<br />
    <img class="speech" src="icons/speech.png">Espenal<br />
    <img class="copyright" src="icons/logo.png">National Park Service<br />
	U.S. Department of the Interior</p>
   
   
    <p class="centered">
    <h2>Social Media:</h2><br />
    <img class="fb" src="icons/facebook.png">
    <img class="insta" src="icons/insta.png">
    <img class="twitter" src="icons/twitter.png"><br />
    <img class="youtube" src="icons/youtube.ico">
    <img class="flickr" src="icons/flickr.png">
    </p>
</div>
	</div>

Here is my CSS:

#footer{
	background-color:#F2F2F2;
	color: #151515;
	width:960px;
	clear:both;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
    padding: 20px;
}

.wrapper{
	clear:both;
	position: relative;
	overflow: hidden;
}

.left {
height:200px;
width:2%;
text-align:center;
float:left;
display: inline-block;
}

.right{
height:100px;
width:20%;
float:right;
text-align:left;
display: inline-block;
}

.centered{
width:5%;
overflow: hidden;
display: inline-block;
text-align:center;
}
2

Welcome to the forums.

It looks like some of your HTML code is not visible in the post. You can edit it and correct the punctuation. If you can’t see it, we can’t either. :smile:

We might have a better chance of helping if you can provide a link to a test page.

3

Hi there savannahthomas46,

and a warm welcome to these forums. :winky:

Does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#footer {
    display: table;
    max-width: 60em;
    padding: 1.25em;
    margin: 0 auto;
    border: 0.062em solid #151515;
    background-color: #f2f2f2;
    color:  #151515;
 }

#footer div {
    display: table-cell;
    width: 33.333%;
    padding: 1em;
    text-align: center;
}

#footer div h2 {
    text-align: center;
 }

#footer div:nth-of-type(2) {
    border-right: 0.062em dotted #999;
    border-left: 0.062em dotted #999;
 }

#footer div:nth-of-type(3) {
    text-align: left;
 }
</style>

</head>
<body> 

 <div id="footer">
  <div>
    <h2>Contact Us:</h2>
    <h3>Mailing Address:</h3>
	P.O. Box 168 <br>
	Yellowstone National Park,<br>
	WY 82190-0168<br>
	<h3>Phone:</h3>
	(307) 344-7381
  </div><div>
    <h2>Social Media:</h2>
    <img class="fb" src="icons/facebook.png" alt="facebook">
    <img class="insta" src="icons/insta.png" alt="insta">
    <img class="twitter" src="icons/twitter.png" alt="twitter"><br>
    <img class="youtube" src="icons/youtube.ico" alt="youtube">
    <img class="flickr" src="icons/flickr.png" alt="flickr">
  </div><div>
    <h2>Other:</h2>
    <img class="FAQ" src="icons/FAQ.png" alt="FAQ">FAQ<br>
    <img class="speech" src="icons/speech.png" alt="speech">Espenal<br>
    <img class="copyright" src="icons/logo.png" alt="logo">National Park Service<br>
	U.S. Department of the Interior
  </div>
   
 </div>

</body>
</html>

coothead

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.