CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22956

Equal spacing between div

Demo

Hi, I have three div here. I want to give equal spacing on it's left and right side. I want to make it generic.

PROBLEMS I FACE

1.If i add more `div` element, it requires many CSS changes
2. What if content length increases? It ll decrease it's spacing.
3. I want to make it possible without using width and inline-block.

If any solutions possible, please let me know. If we 'MUST' use width or inline-block, suggest that also. Thanks in advance. My css as follows:

.wrapper
{
  width: 100%;
  height: 60px;
  background-color: #454545;
}

.div1,.div2,.div3
{
  float: left;
  margin: 0 15% 0 10%;
  color: #fff;
}

Upvotes: 0

Views: 2723

Answers (1)

codingrose
codingrose

Reputation: 15699

The method you are using, will not work if you change your content or change number of columns. Following are possible solutions as far as I know:

Option1:

.div {
    width:33.33%;
    display:inline-block;
}

Disadvantages:

1) inline-block leaves white space between elements. Comment out spaces between elements i.e.

2) As, column is given width, as the columns change, width needs to be changed.

Demo here.

Option2:

.wrapper {
    display:table;
    table-layout:fixed;
    width:100%;
}
.div {
    display:table-cell;
}

Disadvantages:

1) Doesn't work in IE7.

Demo here.

Upvotes: 1

Related Questions