How to make this div border go all the way around the entire div

Question

I have this page and I want a border to go all the way around the main div. For some reason it's not doing it. Please help me out.

Here is the pic of the page:

enter image description here

Here is the code:

<div id="main">

    <section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a>  &rsaquo; <a href="http://www.bolistylus.com/shop/">Shop</a></div>
                <h1 class="page-title">All Products</h1>

        <div class="entry-content">
    <h1 class="description-title">WHY IS BOLI BETTER?</h1>
    <div class="feature feature-item-248"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
    <div class="feature_description">
    <div class="feature_description_header">
    <h2 class="descript-heading">PERFECTLY WEIGHTED</h2>

    </div>
    <div class="feature_description_content">
    <p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
    </div>
    </div>
    </div>
    <div class="feature feature-item-252"><img class="main" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct.png" alt="" /></p>
    <div class="feature_description">
    <div class="feature_description_header">
    <h2 class="descript-heading">PEN-LIKE PRECISION</h2>
    </div>
    <div class="feature_description_content">
    <p>Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.</p>
    </div>

    </div>
    </div>
    <div class="feature feature-item-254">
    <p><img class="main" src="http://www.bolistylus.com/wp-content/uploads/blueproduct.png" alt="" /></p>
    <div class="feature_description">
    <div class="feature_description_header">
    <h2 class="descript-heading">BALL POINT</h2>
    </div>
    <div class="feature_description_content">
    <p>Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.</p>
    </div>
    </div>
    </div>
    <div class="feature feature-item-256">
    <p><img class="main" src="http://www.bolistylus.com/wp-content/uploads/greenproduct.png" alt="" /></p>

    <div class="feature_description">
    <div class="feature_description_header">
    <h2 class="descript-heading">HEAVY METAL</h2>
    </div>
    <div class="feature_description_content">
    <p>Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.</p>
    </div>
    </div>
    </div>
    </div>


  [1]: https://i.stack.imgur.com/CYrQv.png

Here is the css as requested:

.entry-content .feature_description {
    float: left;
    padding-bottom: 20px;
    position: relative;
    width: 400px;
}

.entry-content .feature_description_header {
    padding-bottom: 8px;
}

.entry-content .feature_description_content {
    font-size: 18px;
    line-height: 21.3px;
    margin-bottom: 8px;
    margin-top: 0;
}

.entry-content .back_2_top {
    bottom: 0;
    color: #A4A5A7;
    font-size: 11px;
    position: absolute;
}

.descript-heading {
    font-size: 24px;
}

.entry-content .feature_description_header {
    margin-top: -20px;
    padding-bottom: 8px;
}

.description-title {
    font-size: 38px;
}

.entry-content, .entry-summary {
    border: 3px solid #000000;
    padding: 0.63em 0 0 1.63em;
}

You'll need to show us the appropriate CSS. – Brett DeWoody Jan 10 '12 at 07:05 — Brett DeWoody, Jan 10 '12 at 07:05
I suspect you are using `float` for the item blocks – Pierre de LESPINAY Jan 10 '12 at 07:05 — Pierre de LESPINAY, Jan 10 '12 at 07:05

Pierre de LESPINAY · Answer 1 · 2016-06-06T06:53:18.790

1

It looks like a float issue.
Child(ren) of the main (.feature) div will not affect his box model if they are floats.
If you need float anyway, you need to add something like

<div style="clear: both;">&nbsp;</div>

after the last child of the main div

edited Jun 06 '16 at 06:53

answered Jan 10 '12 at 07:09

Pierre de LESPINAY

44,700
57
210
307

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

It looks like you need a clearfix. Add this to whichever element has the border:

elementWithBorder {
    overflow: hidden;
}

I'm assuming it's the .entry-content element that has the border and needs the clearfix, and that the .feature element is floated.

Before clearfix: http://jsfiddle.net/ZbhVP/

After clearfix: http://jsfiddle.net/ZbhVP/1/

This can happen when a non-floated element's children are floated. Eventually, you might want to use a more cross-browser clearfix method, but this should work in modern browsers.

edited May 23 '17 at 12:13

Community

1
1

answered Jan 10 '12 at 07:12

Wesley Murch

101,186
37
194
228

Just a note: If you are adding extra HTML elements to achieve the clearfix, you're doing it wrong. All you need is CSS. – Wesley Murch Jan 10 '12 at 07:21

score 0 · Answer 3 · answered Jan 10 '12 at 07:06

0

This one worked in jsfiddle:

#main {border: 10px solid black;}

http://jsfiddle.net/lvil/jVE6L/

answered Jan 10 '12 at 07:06

lvil

4,326
9
48
76

That actually puts a border around the entire main div. I would like it to go only around entry-content – novicePrgrmr Jan 10 '12 at 07:11
I also read _"I want a border to go all the way around the main div"_ in your question, don't I ? – Pierre de LESPINAY Jan 10 '12 at 07:20

How to make this div border go all the way around the entire div

3 Answers3