getting 25% width divs to sit side by side and edge to edge of container div

Vote count:

0

Hi I'm trying to get these divs to sit inside a containing (inner) div, the idea is to have a max of 4 divs in a row with a double border (1px solid) and a margin of 30px between the divs at the same time as having the first and last sitting on the edge of the inner div.

This is the code ive done but I can't seem to get the margin to work the way the design needs it to.

HTML*************

<div class="client-list-container clearfix">

           <div class="client-logo-container">

           <div class="logo-container">

                <div class="client-logo">

                    <div class="logo">

                        <p>Client Logo</p>

                    </div>  <!-- logo div ends -->

                </div> <!-- client logo div ends -->

            </div> <!-- logo container div ends -->

           </div> <!-- client logo container div ends -->

I have 6 of these repeated the same way with the first div (client-list-container clearfix) closeing after the 6th.

Here is the CSS I've used and yes I have an empty one but thats cause I was trying to see if another div could help with an idea of doing a margin-left: -30px; on one and a padding-left: 30px; might solve the problem but didn't work out.

CSS****************

         .client-list-container{
             width: 100%;
          }

         .client-logo-container{
             width: 25%;
             float: left;   
          }

          .logo-container{

          }

          .client-logo{
              border: 1px solid #9bb8be;
              margin-bottom: 30px;
           }

           .logo{
               border: 1px solid #9bb8be;
               margin: 4px;
               text-align: center;
               padding: 60px 48px;
            }

Not posted on here before so not sure if I've posted this the best way possible, Sorry if it's not posted the best way.

asked 45 secs ago

Lee Mullen

1

getting 25% width divs to sit side by side and edge to edge of container div