CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Exoon
Exoon

Reputation: 1553

How can i put 3 divs side by side with a margin and a border?

I'm trying to put three divs side by side which works fine but when i add a border and a small gap between each div the 3rd div goes onto a new line. Is there a way to auto resize the divs so they fit?

HTML:

  <div class="trendingContainer">
      <div class="col-lg-4 trendingBox">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
        <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
      <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
</div>

CSS:

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
}

Upvotes: 2

Views: 1000

Answers (6)

Prashant Nair
Prashant Nair

Reputation: 306

.trendingBox { 
    border: 1px solid #e5e5e5;  
    background: #fff; 
    margin: 0 2px 0 0; 
    display: inline-block;
    float: left;
    width: calc(33.3% - 4px);
}
  1. calc is new in css3 I believe.
  2. 4px is 2px(margin) + 2*1px(border)
  3. Another thing you can try is using outline. I believe its width would is considered as a port of the box element, haven't tried though.

I believe rest all is clear

Upvotes: 0

B&#225;lint
B&#225;lint

Reputation: 4049

You can always use calc and percentage based widths:

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    width: calc(100% / 3 - 4px);
}

If you want to support multiple browser widths separately you can use media queries:

@media(max-width: 600px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 2 - 4px);
    }
}

@media(min-width: 601px) {
    .trendingBox {
        border: 1px solid #e5e5e5;
        background: #fff;
        margin: 0 2px 0 0;
        width: calc(100% / 3 - 4px);
    }
}

Upvotes: 3

Ankita Chatterjee
Ankita Chatterjee

Reputation: 165

You can try this.

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    border: 1px solid #e5e5e5;
    display: inline-block;
    position: relative;
    float: left;
    background: #fff;
    margin: 0 2px 0 0;
}
<div class="trendingContainer">
      <div class="col-lg-4 trendingBox">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
        <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending Big</h3> </div>
        123
      </div>
      <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="block-title"><h3>Trending</h3> </div>
        123
      </div>
</div>

Upvotes: 0

Jelle Posthuma
Jelle Posthuma

Reputation: 153

.trendingBox {
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0 2px 0 0;
    box-sizing: border-box;
}

The box-sizing: border-box; does the trick. This makes sure the div doesn't resize when adding padding to it.

EDIT: See my other answer, which is the right way to do it in my opinion.

Upvotes: -2

Jelle Posthuma
Jelle Posthuma

Reputation: 153

One more try, this time totally different, added a child DIV to specify the content with margin and border:

(This maintains the original sizing and other bootstrap stuff, only defines the additional styling on a separate div, which is more clean to use)

HTML:

<div class="trendingContainer">
    <div class="col-lg-4 trendingBox">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>

    <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>

    <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
        <div class="trendingBox-content">
            <div class="block-title"><h3>Trending</h3> </div>
            123
        </div>
    </div>
</div>

CSS:

.trendingContainer {
    margin: 0 auto;
}
.trendingBox {
    /* Add other style here */
}
.trendingBox-content{
    border: 1px solid #e5e5e5;
    margin: 0 2px 0 0;
    background: #fff;
}

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

You can use either float or flex model, but make sure you have border-box set. And when you are using margin along with a fixed layout like this, ensure the widths correctly:

* {
  box-sizing: border-box;
}
.trendingContainer {
  margin: 0 auto;
  overflow: hidden;
}

.trendingBox {
  border: 1px solid #e5e5e5;
  background: #fff;
  float: left;
  width: 30%;
  margin: 0 0.5%
}
<div class="trendingContainer">
  <div class="col-lg-4 trendingBox">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
  <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
  <div class="col-lg-4 trendingBox hidden-sm hidden-xs">
    <div class="block-title">
      <h3>Trending</h3>
    </div>
    123
  </div>
</div>

Preview

preview

Upvotes: 1

Related Questions