Home > DeveloperSection > Forums > Not able to align the elements in-line
Pravesh Singh
Pravesh Singh

Total Post:101

Points:709
Posted on    June-15-2013 3:31 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 720  View(s)
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!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-15-2013 3:42 AM

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



Don't want to miss updates? Please click the below button!

Follow MindStick