CODEWITHSUNDEEP
htmlcss
Kay
Kay

Reputation: 19670

How To Have Multiple Divs On One Line With Even Spacing

Trying to get multiple divs on the same line with even spacing. So they nicely fit the whole container.

Here is what i have got so far. Tried to set margin right and left equal to the same on all the boxes, but it is still tricky to make it even and sometimes the final box will go on a new line.

HTML

     <div id="serviceBox"> 
    <div class="serviceBox1">
        <h2> Heading 1</h2>
        <p>Information</p>
    </div>
     <div class="serviceBox2">
        <h2>Heading 2</h2>
        <p> Information</p>
    </div>
    <div class="serviceBox3">
        <h2>Heading 3</h2>
        <p>Information</p>
     </div>
    <div class="serviceBox4">
        <h2>Heading 4</h2>
        <p>Information</p>
     </div>
 </div>

CSS

#serviceBox
{
    width:100%;
    margin: 0 auto;
    margin-top:75px;
    height:250px;
    border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
    float:left;
    width:20%;
    height: 250px;
    background-color: white;
    border: 1px solid #bdbdbd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px #bdbdbd;
    -webkit-box-shadow: 0 0 10px #bdbdbd;
    box-shadow: 0 0 10px #bdbdbd;
}

https://jsfiddle.net/ruJ2R/3/

Upvotes: 0

Views: 42815

Answers (4)

vittore
vittore

Reputation: 17579

UPDATE: because of the borders , either apply box-sizing:border-box to your style, or put your div with borders inside one more div.

There are at least 4 different ways of doing it.

  • using float layout

  • using display:table-cell

  • using display:inline-block

  • using absolute positioning

    .serviceBox {
  box-sizing:border-box;
  margin-right:4%;
  float:left;
  width:20%;
  height: 250px;
  background-color: white;
  border: 1px solid #bdbdbd;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px #bdbdbd;
  -webkit-box-shadow: 0 0 10px #bdbdbd;
  box-shadow: 0 0 10px #bdbdbd;

}

.serviceBox:first { margin-left:4%; }

see updated fiddle

Upvotes: 1

shammelburg
shammelburg

Reputation: 7308

try this,

.serviceBox {

margin-left:4%;

float:left;
width:20%;
height: 250px;
background-color: white;
border: 1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;

}

Upvotes: 0

Opifexer
Opifexer

Reputation: 176

I would suggest adding a new element inside each serviceBox, in this example the div with class box

CSS:

#serviceBox
{
    width:100%;
    margin: 0 auto;
    margin-top:75px;
    height:250px;
    border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
    float:left;
    width:25%;
}

.box{
    height: 250px;
    background-color: white;
    border:1px solid #bdbdbd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px #bdbdbd;
    -webkit-box-shadow: 0 0 10px #bdbdbd;
    box-shadow: 0 0 10px #bdbdbd;
}

HTML

 <div id="serviceBox"> 
    <div class="serviceBox1">
        <div class="box">
        <h2> Heading 1</h2>
        <p>Information</p>
        </div>
    </div>
     <div class="serviceBox2">
         <div class="box">
        <h2>Heading 2</h2>
        <p> Information</p>
         </div>
    </div>
    <div class="serviceBox3">
        <div class="box">
        <h2>Heading 3</h2>
        <p>Information</p>
        </div>
     </div>
    <div class="serviceBox4">
        <div class="box">
        <h2>Heading 4</h2>
        <p>Information</p>
        </div>
     </div>
 </div>

This way the service boxes are nicely a quarter of the container and inside service box you can add the border and shading to the new box element

Upvotes: 11

ASGM
ASGM

Reputation: 11381

Your problem is that the boxes have a border, so giving them width and margin in percentages that sum to 100% don't work: each box has an extra 2 pixels from the border, pushing the last one off the row. But you can solve this problem by giving them negative margins to compensate for the border:

width:25%;
margins:0 -1px;

Upvotes: 0

Related Questions