CODEWITHSUNDEEP
htmlcsswidth
Xtian
Xtian

Reputation: 3587

Float Div keep its Width when there is no content

I have 3 <p> with set widths, but occassionally i there will be no content inside of them, but I need them to keep their widths, even if no content is inside the <p>. 

<div class="grid_12 alpha omega directory-phone-table-row">
        <p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}</a></p>
        <p class="grid_3 alpha omega">${phonework}</p>
        <p class="grid_3 alpha omega">${departmentName}</p>
    </div>

.directory-phone-table .directory-phone-table-data p{
    color: #000;
    font-size: 12px;
    float: left;
    width: 220px;
    overflow: hidden;   
}

Upvotes: 2

Views: 1813

Answers (5)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

According to the W3C spec, user-agents should ignore empty p-elements. Therefor it shouldn't be possible to style an empty p-element. From the spec:

We discourage authors from using empty P elements. User agents should ignore empty P elements.

In your case, you could use a div or span element instead of the p, which will allow you to style it even if it is empty.

If you for some reason still want to use the p-element you could "trick" the browser by adding &nbsp; as the content, but that seems like a somewhat ugly solution. I would prefer switching to a more appropriate tag.

Upvotes: 2

Koen Peters
Koen Peters

Reputation: 12916

You can add a border with the same color as the background although that is really really ugly. Instead of floats you could also use display:inline-block, like so:

.directory-phone-table .directory-phone-table-data p{
  display: inline-block;
  color: #000;
  font-size: 12px;
  width: 220px;
  overflow: hidden;  
}​

This won't work in IE6 though

Upvotes: 0

Misha Ts
Misha Ts

Reputation: 431

You can use &nbsp; instead of empty

Upvotes: 0

ckaufman
ckaufman

Reputation: 1497

With your current example, your CSS selector is not targeting the

tags within the HTML that you provided. You specified .directory-phone-table .directory-phone-table-data in your CSS but the

are in directory-phone-table-row

If you just use .directory-phone-table-row p you should be good to go

Upvotes: 0

Ben Ashton
Ben Ashton

Reputation: 1405

I don't think it's possible to define a width of a block element when there is no content inside. At least, from my experience anyway. What I normally do is put spaces where you might expect an empty value (better yet, use the html code for space: &nbsp;). If you have a way to return a space character if data returns nothing -- go that route, otherwise you can put a space at the end of your variables like so:

<p class="grid_3 phone-name omega"><a href="javascript:;">${firstname}, ${lastname}&nbsp;</a></p>
<p class="grid_3 alpha omega">${phonework}&nbsp;</p>
<p class="grid_3 alpha omega">${departmentName}&nbsp;</p>

Upvotes: 1

Related Questions