CODEWITHSUNDEEP
htmlcssheightborder
snowleopard
snowleopard

Reputation: 739

How to make border disappear when there is no content?

I have the following sidebar:

div.sphinxsidebar {
    margin: 0px 15px 0px 0;
    padding: 0;
    width: 210px;
    float: right;
    font-size: 1em;
    text-align: center;
    border: 0.2px solid #CCC;
    border-radius: 10px;
    background-color: #F7F7F7;
    }

This div has a wrapper in it:

div.sphinxsidebarwrapper {
   padding: 0;

}

I looks something like this:

----------------------------------------

|--------Table of content----------|

----------------------------------------

The issue i am having is that when this div becomes empty, the border looks like this:

----------------------------------------

So essentially, the top border coincides with the bottom border and the border is still visible.

How do i make the border disappear for this case.

The issue seems to be that the border has a height associated to it. So to the div, the content is not empty.

Upvotes: 1

Views: 3047

Answers (2)

RBrounek
RBrounek

Reputation: 21

You can use CSS3 solution or JS solutions

CSS

Hide element:

.sphinxsidebar:empty{
    display:none
}

or remove only border:

.sphinxsidebar:empty{
    border: none;
}

JS: remove element:

$(document).ready(function() { $('.sphinxsidebar:empty').remove(); });

or remove borders:

$(document).ready(function() { $('.sphinxsidebar:empty').css({'border': 'none'}); });

Upvotes: 2

Wowsk
Wowsk

Reputation: 3675

When you set the div to empty, also set the display to none.

display:none;

Upvotes: 0

Related Questions