Align fluid list within div

StackOverflow https://stackoverflow.com/questions/22441307

Question

I am trying to align a row of divs horizontally within a div fluidly. When the container div contracts the inner divs (which will be actually be images within divs) will push next to each other. I have created a fiddle and the problem I am having is that the inner divs do not move closer when the div is shrunk. I have tried using %'s and numerous other ways to fix this but am new to working with %'s as apposed to px. In my example the container div is fluid but the red inner divs are not! How do i make the inner divs fluid? Here is the fiddle

And the code:

    <html>

<head>
  <title>Alignment</title>

  <style type="text/css">
      .container{position: relative; margin: 0px auto; border: 1px solid black; width: 100%; max-width: 500px;}
       li{display: inline-block; margin-left: 25px;}
       ul,li{list-style: none;}
      .box{width: 100px; height: 100px; border: 1px solid red;}
  </style>
</head>

<body>

<div class="container">
  <ul>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <div style="clear: both"></div>
  </ul>
</div>

<p>When the right side of the container div hits the red box I want the boxes to be pushed left against each other until they
reach the left side of the container div.</p> 

</body>
</html>
Was it helpful?

Solution

Try giving width to the elements in %. For eg: try adding the below codes to your stylesheet

li{
   display: inline-block; 
   margin-left: 5%; 
   width:25%;
}
.box{
   width: 100%;
   height: 100px; 
   border: 1px solid red;
}

OTHER TIPS

Try this:

.container{
    text-align: center;
}
ul,li{
    padding: 0;
}
li{
    display: inline-block;
    margin-left: 25px;
}
li:first-child{
    margin-left: 0;
}

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top