+ 13

How to divide footer in 3 section.

Footer has three section like 1.contact us 2.email 3.other social etc

11th Jun 2019, 2:27 AM
Komal 👩‍💻
Komal 👩‍💻 - avatar
6 Respuestas
+ 9
To have three columns of almost equal width: HTML: <div id="footer"> <p>First section, first line of text<br /> Second line of text</p> <p>Second section, first line of text<br /> Second line of text</p> <p>Third section, first line of text<br /> Second line of text</p> </div> CSS: #footer > p:first-child { float: left; text-align: left; width: 33.3%; } #footer > p:nth-child(2) { float: left; text-align: center; width: 33.4%; } #footer > p:last-child { float: right; text-align: right; width: 33.3%; }
14th Jun 2019, 3:23 PM
Assassin💞[#BeFierce]
Assassin💞[#BeFierce] - avatar
11th Jun 2019, 3:37 AM
Calviղ
Calviղ - avatar
+ 3
Just insert 3 div tags inside the footer and give every div inside the footer a top and bottom margin of your preference
14th Jun 2019, 3:01 AM
Sudarshan Rai
Sudarshan Rai - avatar
+ 2
Cool enoug
11th Jun 2019, 5:32 PM
Justin
Justin - avatar
+ 1
Komal♥️ I use display:flex on header and footer tag, set child tag for each sections in header/footer, set justify-content:space-between in header/footer in order to make 3 sections separated horizontally with spacing.
12th Jun 2019, 7:14 AM
Calviղ
Calviղ - avatar
0
HTML: <footer id="footer"> <div class="wrap"> <div class="left"> <h3><a href="http://xojaynee.tictail.com/about-us">About Us</a></h3> <h3><a href="http://xojaynee.tictail.com/faq">FAQ</a></h3> <h3><a href="http://xojaynee.tictail.com/contact-us">Contact Us</a></h3> <h3><a href="http://xojaynee.tictail.com/about-us">Terms & Conditions</a></h3> </div> <div class="clear"></div> <div class="right"> <h3>Be the first to get access to our new arrivals and exclusive promo codes.</h3> <form action="//tictail.us13.list-manage.com/subscribe/post?u=a39ec65a4cc079bc2af73cd52&amp;id=d3b88dcefc" method="post" id="right" name="right" class="validate" target="_blank" novalidate> <div><input type="text" name="b_a39ec65a4cc079bc2af73cd52_d3b88dcefc" tabindex="-1" value=""></div> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscribe_button"> </form> </div> <div class="clear"></div> <div class="centered"> <h3><a href="http://xojaynee.tictail.com/track-order">Track Order</a></h3> <h3><a href="http://xojaynee.tictail.com/how-to-shop">How To Shop</a></h3> <h3><a href="http://xojaynee.tictail.com/size-guide">Size Guide</a></h3> <h3><a href="http://xojaynee.tictail.com/delivery-information">Delivery Information</a></h3> <h3><a href="http://xojaynee.tictail.com/return-exchange">Return & Exchange</a></h3> </div> </div> </footer> CSS: #footer { position: relative; overflow: hidden; } .wrap { background: #3E3E3E; margin: 0 auto; position: relative; overflow: hidden; } #footer a, #footer h3 { font: 'Open Sans', sans-serif; color: #fff; font-size: 14px; font-weight: normal; text-transform: uppercase; line-height: 26px; } .clear { clear: both; } .left { text-align: left; float: left; width: 33%; padding: 20px; } .right { float: right; text-align: left; font: 'Open Sans', sans-serif; color: #fff; font-size: 14px; font-we
20th Jun 2019, 7:03 PM
Aman Rajput