How to make a div with no content have a width?

Question

I am trying to add a width to a div, but I seem to be running into a problem because it has no content.

Here is the CSS and HTML I have so far, but it is

Answer 1

It has width but no content or height. Add a height attribute to the class test1.

Answer 2

Use min-height: 1px; Everything has at least min-height of 1px so no extra space is taken up with nbsp or padding, or being forced to know the height first.

Answer 3

I had the same issue. I wanted icons to appear by pressing the button but without any movement and sliding the enviroment, just like bulb: on and off, appeared and dissapeared, so I needed to make an empty div with fixed sizes.

width: 13px;
min-width: 13px;

did the trick for me

Answer 4

Too late to answer, but nevertheless.

While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)

Code:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

Answer 5

  may do the trick; works in XSL docs