html - Footer div text wont line up -
what im trying lining 3 divs in footer. cant seem them line properly. when seek utilize float 2 of them line while 3rd 1 go below them. know whats going on?
class="snippet-code-css lang-css prettyprint-override">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; } class="snippet-code-html lang-html prettyprint-override"><!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>
i think display: table technique suits situation:
class="snippet-code-css lang-css prettyprint-override">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; } class="snippet-code-html lang-html prettyprint-override"><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 css
No comments:
Post a Comment