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

Question

a div usually needs at least a non-breaking space ( ) in order to have a width.

Either use padding , height or &nbsp for width to take effect with empty div

EDIT:

Non zero min-height also works great

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.

Use CSS to add a zero-width-space to your div. The content of the div will take no room but will force the div to display

.test1::before{
   content: "\200B";
}

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

There are different methods to make the empty DIV with float: left or float: right visible.

Here presents the ones I know:

• set width(or min-width) with height (or min-height)
• or set padding-top
• or set padding-bottom
• or set border-top
• or set border-bottom
• or use pseudo-elements: ::before or ::after with:
  • {content: "\200B";}
  • or {content: "."; visibility: hidden;}
• or put   inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)

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>