CODEWITHSUNDEEP
htmlcss
charlie
charlie

Reputation: 1384

Display 3 boxes inline with responsive CSS

I'm trying to display 3 boxes inline with each other all of equal widths then get smaller as the page gets smaller then when it gets too small for all 3 boxes, for them all to display under each other 100% width.

Fiddle with the full code: http://jsfiddle.net/tBX6H/

CSS

.cont {
    width:80%;
    margin:0 auto 0 auto;
}

.box-container {
    width:100%;
    padding:5px;
}

.icon-box {
    margin-left: 45px;
    width:33%;
    display:inline;
    float:left;
}

HTML

<div class="cont">

<!-- Icon Box Container -->
<div class="box-container">

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<br class="clearfloat">   

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

</div><!-- cont -->

Upvotes: 1

Views: 2832

Answers (1)

Daniel Tate
Daniel Tate

Reputation: 2163

Looks like your problem is that you have a margin of 45px, you must take this into account when using inline elements.

Check out https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Some good information on how that all works.

Heres your example: http://jsfiddle.net/MzEPN/

Heres what it should be: http://jsfiddle.net/MzEPN/1/

.icon-box {
    width:33%;
    display:inline;
    float:left;
    background:red;
}

Upvotes: 2

Related Questions