CODEWITHSUNDEEP
htmlcsscross-browser
Eric Falsken
Eric Falsken

Reputation: 4934

Remove padding for an empty element

I'm generating a page for an upcoming portal site, and I've got an HTML element with some optional content. I'd like the element to not render if it is empty, but adding some padding to it causes it to render. How do I add padding to the content, but only if content is present?

.someElement{padding-top: 5px;}

HTML in question:

<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>

Basically, I'd like the second element, above, to not take up any space. I'm testing in all major browsers, using XHTML 1.1 doctype.

Upvotes: 73

Views: 48091

Answers (8)

MindTailor
MindTailor

Reputation: 2394

You can do the trick with the CSS3 pseudo-class :empty

.someElement
{
    // your standard style
}
.someElement:empty
{
    display:none;
}

Sadly Internet explorer doesn't support that feauture yet. For all the other browsers it shall do just fine...

Upvotes: 212

vito78
vito78

Reputation: 35

Don't use padding on container, use margin on content. Than when there is no content, container remains invisible.

Upvotes: 2

Georgi Nikolov
Georgi Nikolov

Reputation: 1165

<style>
.someElement{padding-top: 5px; display:table;}
</style>
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>

Adding display:table; should do the trick.

Upvotes: 5

deau
deau

Reputation: 1223

Give the element an id attribute. You can then use Javascript to check it's innerHTML property once the page has loaded. If innerHTML has a length of zero, then you can set it's display property to none. This page might help if you don't know your javascript.

This is still a mucky way to play. If you know the element shouldn't be rendered before you serve the page it would be better to omit it altogether. If you don't want to omit the element, just hide it, then force it into hiding; style="display: none"

Upvotes: 7

munch
munch

Reputation: 6321

If it's necessary to have the div.someElement in the HTML, the best CSS/HTML way to do that would be to add an extra div around the added content that has the padding property

.someElement > div{padding-top:5px;}

<div class="someElement"><div>Content</div></div>

Otherwise, do as Pekka says, or take a look at having javascript do it for you.

Upvotes: 3

Matteo Riva
Matteo Riva

Reputation: 25060

Give the empty element a different class (say someHiddenElement) when you are generating the content. Then add someHiddenElement { display: none } to your style sheet.

Upvotes: 3

DOK
DOK

Reputation: 32841

At the point where you populate the optional div, if there is no text to put in it, try changing the CSS display property to none. According to this source (and others), display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Upvotes: 0

Pekka
Pekka

Reputation: 449525

I can't think of a CSS only way to do that.

I would try to decide whether the element is rendered at the time I know whether there will be any content in it. That is probably the cleanest solution.

Upvotes: 2

Related Questions