CODEWITHSUNDEEP
javascripthtmlcss
APRULE
APRULE

Reputation: 115

separate div to 3 columns

I asked same question 2 days ago but now i still don't get it.
I have 1 div and i want it to be separate into 3 columns of div. I know how to do this for 2 column but, when i am trying 3 column(right, center and left) i get this:

enter image description here

Problem: The pink square is not in the center

Here is my code:

HTML:

 <div id="our_services" class="container">
    <h1>המוצרים שלנו</h1>
    <div id="try">
        <div id="product1">
        </div>
        <div id="product2">
        </div>
        <div id="product3">
        </div>
    </div>
</div>

CSS:

#our_services {
    /*height: 450px;*/
    text-align: center;
    font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
    color: black;
    background-color: rgb(224,224,224);
    overflow: auto;
    margin: auto;
}

#try {
    background-color: orange;
    width: 50%;
    height: 50%;
    margin: auto;
}

#product1 {
    width: 30%;
    height: 75%;
    background-color: green;
    float: right;
    margin: 5px;
}

#product2 {
    width: 30%;
    height: 75%;
    background-color: pink;
    float: right;
    margin: 5px;
}

#product3 {
    width: 30%;
    height: 75%;
    background-color: blue;
    float: left;
    margin: 5px;
}

Upvotes: 0

Views: 1918

Answers (8)

ketan
ketan

Reputation: 19341

One nice solution is to use display:table and display:table-cell. Which will works for 2 and 3 div both.

HTML:

<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>

CSS:

    #our_services {
    background-color: rgb(224, 224, 224);
    color: black;
    font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
    height: 450px;
    margin: auto;
    overflow: auto;
    text-align: center;
}
#try {
    background-color: orange;
    display: table;
    height: 50%;
    margin: auto;
    width: 50%;
     border-collapse: separate;
  border-spacing: 10px;
}
.product{
     display: table-cell;
    height: 75%;
    margin: 5px;
    width: 30%;
}

#product1 {
    background-color: green;
}
#product2 {
    background-color: pink;  
}
#product3 {
    background-color: blue;
}

Check Fiddle here.

Upvotes: 0

Pavel Gatnar
Pavel Gatnar

Reputation: 4053

add the following css:

html, body {
  width: 100%;
  height: 100%;
}

and add the following properties to #our_services css:

  width: 100%;
  height: 100%;

further set box-sizing: border-box; and margin: 0% 0% 0% 2.5%; (top as you need, right 0%, bottom as you need and left 2.5%) for the prouctu divs. Btw. you should extract common style to a product class and apply the class on the product divs...

Upvotes: 0

biplob
biplob

Reputation: 1272

Check the example below:

Code:

#our_services {          
  text-align: center;
  font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
  color: black;
  background-color: rgb(224, 224, 224);
  overflow: auto;
  margin: auto;
}
#try {
  background-color: orange;
  width: 50%;
  height: 50%;
  margin: auto;
}
#product1 {
  width: 31%;
  height: 200px;
  background-color: green;
  float: left;
  margin: 1%;
}
#product2 {
  width: 31%;
  height: 200px;
  background-color: pink;
  float: left;
  margin: 1%;
}
#product3 {
  width: 31%;
  height: 200px;
  background-color: blue;
  float: left;
  margin: 1%;
}
<div id="our_services" class="container">
  <h1>המוצרים שלנו</h1>
  <div id="try">
    <div id="product1">
    </div>
    <div id="product2">
    </div>
    <div id="product3">
    </div>
  </div>
</div>

Example

Upvotes: 0

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10588

As far as I understand: If you don't want any spaces between you'd have to set the width property to (100/3)%

It all depends on your layout of what you want, if you want margin spaces between them all so that they're equally spaced between each other and the edges of their container div you'll have to work out what to do there. So in the case now you have 30% width for each, that leaves you with 10% spacing width which you can spread to 2.5% for margin-left: of your first 2 divs and then for the 3rd div use 2.5% for margin-right: (for a space between the right side and the 3rd div) margin-left:

But as I said, it all depends on what exactly you want for your layout, so if this doesn't answer your question could you tell me more about your expected layout?

If you want a very simple fix based off of what you have at the moment you could set the margin: property to auto and that should center the middle div between what you have now.

Edit: You should also edit the float properties so that they all float one way.

Upvotes: 0

Vee6
Vee6

Reputation: 1577

I don't know of any way you can do this purely with html/css techniques. You can arrange the items with javascript after the dom (or this part at least) has loaded.

On the other hand, this gets you a little closer to what you want, although the distances between rows won't be equal to the distances between firs/last row and beginning/end of the orange rectangle:

 <div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
    <div class="smth">
        <div id="product1" class="product">
        </div>
    </div>
    <div class="smth">
        <div id="product2" class="product">
        </div>
    </div>
    <div class="smth">
        <div id="product3" class="product">
        </div>
    </div>
</div>

<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}

.smth {
    width: 33%;
    height: 75%;
    float: left;    
}

#try{
    background-color:orange;
    width:50%;
    height:50%;
    margin:auto;
}

.product {
    width: 90%;
    height: 100%;
    margin: auto;
}

#product1{
    background-color:green;
}

#product2{
    background-color:pink;
}

#product3{
    background-color:blue;
}

</style>
</div>

Upvotes: 0

Crock
Crock

Reputation: 121

Try with display:inline-block; instead. exemple

Upvotes: 1

MrVentzi
MrVentzi

Reputation: 669

#our_services {

  /*height: 450px;*/

  text-align: center;

  font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";

  color: black;

  background-color: rgb(224, 224, 224);

  overflow: auto;

  margin: auto;

}

#try {

  background-color: orange;

  width: 50%;

  height: 50%;

  margin: auto;

}

#product1 {

  width: 30%;

  height: 75%;

  background-color: green;

  float: left;

  margin: 1.5%;

}

#product2 {

  width: 30%;

  height: 75%;

  background-color: pink;

  float: left;

  margin: 1.5%;

}

#product3 {

  width: 30%;

  height: 75%;

  background-color: blue;

  float: left;

  margin: 1.5%;

}
<div id="our_services" class="container">
  <h1>המוצרים שלנו</h1>
  <div id="try">
    <div id="product1">
      afs
    </div>
    <div id="product2">
      asf
    </div>
    <div id="product3">
      asf
    </div>
  </div>
</div>

You had float right as well on one of the boxes

Upvotes: 1

Rajesh Kumar
Rajesh Kumar

Reputation: 94

use float left to 1st and 2nd div also. and give margin on percentage. I think this will solve your problem.

Upvotes: 0

Related Questions