Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hide border if there is no content

On a div I have css set:

div.class {border: 1px solid red;} 

The div is positioned absolutely in the center of the page. The problem is that the border appears even if there is no content.

Any css methods to get the border to not appear if there is no content?

like image 935
Harry Avatar asked Jun 20 '11 16:06

Harry


People also ask

How do I make an invisible border in HTML?

To make an invisible border, set the BORDER attribute to 0. (Although most browsers default to a table border of 0, specifically stating it ensures that the border will be invisible in all browsers.)

How do you hide border lines?

Go to Design > Page Borders. In the Borders and Shading box, on the Page Border tab, select the arrow next to Apply to and choose the page (or pages) you want to remove the border from. Under Setting, select None, and then select OK.

How do I add a space between content and border?

You usually use padding to add distance between a border and a content. However, background are spread on padding. You can still do it with nested element.


1 Answers

CSS3 has a selector defined for this case. It does not work in IE8 and lower though.

div.class:empty {      border: none; } 

Your best option would be to tweak this on the server side, and simply don't display that div if it would be empty.

like image 159
kapa Avatar answered Oct 14 '22 00:10

kapa