How to align div next to each other inside li with width as percentage

Question

I am trying to make responsive layout. I have two <div>'s inside two different li elements. I want to adjust them on screen change and with media query on specific size. I want them to move down. If I make their width in pixel they are coming next to each other but if I make width in percentage they are overlapping each other. How can I make their width in percentage and not to overlap eachother? Please see the jsfiddle. Thanks

#btmIconsDiv {
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;
  position: relative;
}
#btmIconsDiv ul li {
  display: inline-block;
  list-style-type: none;
  margin-left: 30px;
}
#btmIconsDiv ul li div.btmIconsUlliDiv {
  float: left;
  width: 274px;
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

<div id="btmIconsDiv">
  <ul>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
    <li>
      <div class="btmIconsUlliDiv"></div>
    </li>
  </ul>
</div>

jsFiddle https://jsfiddle.net/mohsinali/mucs2ep3/1/

You can use ```display: flex;``` for ```ul``` and few additional styling to fix your current styling. — aavrug, Sep 27 '16 at 06:51

Aravind · Answer 1 · 2016-09-27T07:02:26.210

0

Just modify this css

#btmIconsDiv ul li{  
 display: inline;// you have to correct this
 list-style-type: none;  
 margin-left: 30px;       
 }

1. Update

For that margin-left problem use this

#btmIconsDiv
{

float: left;
margin-top: 84px;
width: 100%;
height: 341px;
background-color: orange;    
position: relative;
display:table;           // add this 
}

You can use this as Updated Fiddle

edited Sep 27 '16 at 07:02

answered Sep 27 '16 at 06:34

Aravind

40,391
16
91
110

this is awsome can you please explain me a bit why block was making problom – Sep 27 '16 at 06:38
for your reference. the difference between inline vs inline-block is in this link detailed http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – Aravind Sep 27 '16 at 06:41
why it's not taking margin on #btmIconsDiv ul li{ display: inline; list-style-type: none; margin-left: 30px; – Sep 27 '16 at 06:49

score 0 · Answer 2 · answered Sep 27 '16 at 06:35

try this

#btmIconsDiv ul
{
    width: 100%;
    display: inline-block;
    margin: 0px;
    margin-top: 10px;
}
#btmIconsDiv ul li{  
    width: 45%;
    display: inline-block;
    list-style-type: none;  

}

#btmIconsDiv ul li div.btmIconsUlliDiv{    
    float: left;
    width: 100%;
    /*margin-right: 50px;*/
    height: 300px;
    background-color: red;
    border: 1px solid blue;
}

score 0 · Answer 3 · answered Sep 27 '16 at 06:35

I believe the reason they are overlapping is because of the float left value. No harm in using float as there are obvious situations in which it is useful but this is a fairly common occurrence. The first thing I would suggest trying is setting overflow: hidden; Some people suggest overflow: auto; but hidden is what I use when I have divs not alligning properly and it always works! Best of luck!

score 0 · Answer 4 · answered Sep 27 '16 at 06:46

with CSS3 you can use calc property which allows you to plus or minus from percentage:

#btmIconsDiv{
  float: left;
  margin-top: 84px;
  width: 100%;
  height: 341px;
  background-color: orange;    
  position: relative;
}

#btmIconsDiv ul li{  
  width: calc(50% - 32px); // 50% and minus 30px of margin right + 2px of border...
  display: inline-block;
  list-style-type: none;  
  margin-right: 30px; // user margin right instead of left...
}

#btmIconsDiv ul li div.btmIconsUlliDiv{    
  float: left;
  width: 100%;
  /*margin-right: 50px;*/
  height: 300px;
  background-color: red;
  border: 1px solid blue;
}

https://jsfiddle.net/mohsinali/mucs2ep3/1/

score 0 · Answer 5 · answered Sep 15 '19 at 18:17

You can use Flex to solve your problem try code below.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    #btmIconsDiv {
      float: left;
      margin-top: 84px;
      width: 100%;
      height: 341px;
      background-color: orange;
      position: relative;
    }
    #btmIconsDiv ul {
      display: flex;
      list-style-type: none;

    }
    .btmIconsUlliDiv {
      float: left;
      width: 274px;
      height: 300px;
      background-color: red;
      border: 1px solid blue;
    }


    </style>
    </head>
    <body>

    <div id="btmIconsDiv">
      <ul>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
        <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
         <li>
          <div class="btmIconsUlliDiv"></div>
        </li>
      </ul>
    </div> 

    </body>
    </html>

How to align div next to each other inside li with width as percentage

5 Answers5