---
title: "Not able to align the elements in-line"  
description: "Not able to align the elements in-line"  
author: "Anonymous User"  
published: 2013-06-15  
updated: 2013-06-15  
canonical: https://www.mindstick.com/forum/1154/not-able-to-align-the-elements-in-line  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Not able to align the elements in-line

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances), \
I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to make a footer for my website.\
I want 2 divs and one list to be [inline](https://www.mindstick.com/interview/1012/describe-the-difference-between-inline-and-code-behind) in this footer. But that is not happening. I used the css the CSS [Property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) display:inline-[block](https://www.mindstick.com/forum/157599/explain-the-process-control-block-pcb-in-the-operating-system). What happens is that the divs get aligned but the list element just shifts a bit down.\
Could someone [please explain](https://www.mindstick.com/forum/344/hi-rohith-i-am-new-for-mvc-please-explain-how-to-set-implicitly-isauthenticated-true) me why this is happening? Is it [right](https://www.mindstick.com/articles/12766/check-whether-you-are-doing-digital-transformation-right-or-not) 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!

## Replies

### Reply by AVADHESH PATEL

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\
\


---

Original Source: https://www.mindstick.com/forum/1154/not-able-to-align-the-elements-in-line

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.