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

You add to this DIV's CSS position: relative, it will do all the work.

Answer 2

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";
}

Answer 3

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;)

Answer 4

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

EDIT:

Non zero min-height also works great

Answer 5

Try to add display:block; to your test1

Answer 6

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