NOT ABLE TO ALIGN THE ELEMENTS IN-LINE

Pravesh Singh

Total Post:101

Points:709
Posted by  Pravesh Singh
 988  View(s)
Ratings:
Rate this:
Hi Expert, 

I am trying to make a footer for my website.

I want 2 divs and one list to be inline in this footer. But that is not happening. I used the css the CSS Property display:inline-block. What happens is that the divs get aligned but the list element just shifts a bit down.

Could someone please explain me why this is happening? Is it right thing to use inline-block for this thing or is there some better way(I'm sure that there is)?

Any help would be amazing thank you!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Not able to align the elements in-line

    Hi Pravesh,


    You can try as following using CSS3 flexbox module

    HTML

    <div id="footer">
        <div class="footerContents">
           ...
         </div>

         <ul class="footerContents">
            ...
         </ul>

         <div class="footerContents">
            ...
         </div>
    </div>
    <div>Copyright © </div>

    CSS

    #footer {
      height:auto;
      width:100%;
      background-color:#666;
      background-image:url(footer_shade.png);
      background-repeat:no-repeat;
      background-position:50% 0;
      border-top:1px solid #FFF;
      color:#fff;
      font-family:'Bree Serif',serif;
      font-size:16px;
      line-height:20px;

      display:-moz-box;
      display:-webkit-box;
      display:-ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -webkit-box-pack: justify; 
      -moz-box-pack: justify; 
      -ms-flex-pack: justify; 
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }

    .footerContents {
      width:200px;
      height: 200px;
      padding:5px;
      margin-top: 30px;
      margin: 20px;
      margin-bottom: 5px;
      background-color: red;

      -moz-flex-box:1;
      -webkit-flex-box:1;
      -ms-flex:1 1 200px;
      -webkit-flex: 1 1 200px;
      flex:1 1 200px;
    }

    I hope it resolve your problem


Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!