How to divide footer in 3 section.

Question

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

Answer 1

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%; }

Answer 2

https://code.sololearn.com/W0FN4YnXSYRe/?ref=app

Answer 3

Just insert 3 div tags inside the footer and give every div inside the footer a top and bottom margin of your preference

Answer 4

Cool enoug

Answer 5

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.

Answer 6

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