CODEWITHSUNDEEP
javascripthtmlcss
PMM
PMM

Reputation: 165

Responsive Footer and Columns in footer

I am a Tech Writer who has been assigned the work on creating a website. I need some help with the footer that I am creating for the website. I am having trouble making a good css markup that will work for the HTML code I have managed to create. Again coding is not my strength and it is something i am learning and implementing. Any help would be appreciated. Here is the HTML code and the css that I am currently using.

    <!DOCTYPE html>
<html>
    <body>

        <header>

        <footer class="footer-distributed">

               <nav class="footer1">

        <div class="footer-left">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

        <div class="footer-left1">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>
        <div class="footer-left2">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

</div>
        <div class="footer-left3">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

        <div class="footer-left4">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

</nav>

</footer>

    </body>

</html>

CSS is as follows. Frankly found this code on a tutorial and used it and modified the values, but I am not getting the desired results. Would like the footer to be responsive with 5 columns. Thank you all for having a look and any help is appreciated.![enter image description here][1]

            .footer-distributed{
background-color: #551155;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 20px 40px;
margin-top: 0px;
    height:320px
    }

    .footer-left,
    .footer-left1,
    .footer-left2,
    .footer-left3,
    .footer-left4 {
     width: 18%;
      }

    .footer-left,
    .footer-left1,
    .footer-left2,{
              margin-right: 20px;
              margin-right: 2rem;
                }

            .footer-left,
            .footer-left1,
            .footer-left2,
            .footer-left3,{
             float: left;
            }

            .footer-left4 {
            float: right;
            }

             .footer-distributed h1{
              color:  #ffffff;
             font: normal 36px 'Cookie', cursive;
             margin: 0;
             }

Upvotes: 1

Views: 313

Answers (2)

Max Maxymenko
Max Maxymenko

Reputation: 581

You can do this with a CSS property called display:flex which will let you do this the easier way.

Take a look at this JSFiddle

.footer_wrap {width:100%; max-width:100%; background:#ccc;}
.footer_content {padding:10px; display:flex;}
.footer_nav {width:150px;}
<div class="footer_wrap">

  <div class="footer_content">
    <nav class="footer_nav">
      <ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
  </div>

</div>

Upvotes: 1

Ben Hawker
Ben Hawker

Reputation: 949

I would take a look at the following http://jsfiddle.net/Gar3H/2/ which demonstrates the type of layout you are looking for with some good best practices.

This shows a 4 column layout, but the principle remains the same - it utilises Media Queries to ensure that your site scales across different screen sizes/devices.

Note the use of class footerFloat is repeated multiple times. Given your requirements you have no need for <div class="footer-left1">, <div class="footer-left2"> etc.

Upvotes: 0

Related Questions