Footer text does not line up
What I am trying to do is line up three divs in the footer. But I cannot get them to fit correctly. When I try to use floats, only two of them will line up and the third one is below them. Does anyone know what's going on?
body{
background-color: rgb(240, 240, 240);
}
#pageFooter{
margin-top: 10px;
background-color: red;
height: 200px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 1px 1px 1px 1px #888888;
}
#pageFooter p{
color: white;
padding-left: 1em;
font-family: sans-serif;
vertical-align: middle;
line-height: 40px;
font-weight: bold;
}
#leftFooter{
text-align: left;
float: left;
position: relative;
}
#midFooter{
text-align: center;
float: center;
position: relative;
}
#rightFooter{
text-align: right;
float: right;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 1</title>
<link rel="stylesheet" type="text/css" href="css/meyersReset.css">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
</head>
<body>
<div id="container">
<footer id="pageFooter">
<div id="leftFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="midFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="rightFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</footer>
</div>
</body>
</html>
+3
source to share
2 answers
I think the method display: table
is appropriate for your situation:
body {
background-color: rgb(240, 240, 240);
}
#pageFooter {
margin-top: 10px;
background-color: red;
height: 200px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 1px 1px 1px 1px #888888;
display: table;/*Add display table*/
width: 100%;
}
#pageFooter p {
color: white;
padding-left: 1em;
font-family: sans-serif;
vertical-align: middle;
line-height: 40px;
font-weight: bold;
}
#leftFooter {
text-align: left;
display: table-cell;/*add display table-cell*/
position: relative;
}
#midFooter {
text-align: center;
display: table-cell;/*add display table-cell*/
position: relative;
}
#rightFooter {
text-align: right;
display: table-cell;/*add display table-cell*/
position: relative;
}
<body>
<div id="container">
<footer id="pageFooter">
<div id="leftFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="midFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="rightFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</footer>
</div>
</body>
+4
source to share
No property float: center
.
You have to float
divs left
and add width to align them correctly.
body{
background-color: rgb(240, 240, 240);
}
#pageFooter{
margin-top: 10px;
background-color: red;
height: 200px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 1px 1px 1px 1px #888888;
}
#pageFooter p{
color: white;
padding-left: 1em;
font-family: sans-serif;
vertical-align: middle;
line-height: 40px;
font-weight: bold;
}
#leftFooter, #midFooter, #rightFooter{
float: left;
position: relative;
width: 33%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 1</title>
<link rel="stylesheet" type="text/css" href="css/meyersReset.css">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
</head>
<body>
<div id="container">
<footer id="pageFooter">
<div id="leftFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="midFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
<div id="rightFooter">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</footer>
</div>
</body>
</html>
+2
source to share