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 not working  CSS body  margin 0 auto  width 1000px   ul  width 800px    ul li  clear both     test1  width 200px  float left     HTML  lt body gt     lt div id  quot test quot  gt       lt ul gt         lt li gt           lt div class  quot test1 quot  gt width1 lt  div gt           lt div class  quot test1 quot  gt width2 lt  div gt           lt div class  quot test1 quot  gt width3 lt  div gt         lt  li gt         lt li gt           lt div class  quot test1 quot  gt  lt  div gt           lt div class  quot test1 quot  gt width2 lt  div gt           lt div class  quot test1 quot  gt width3 lt  div gt         lt  li gt         lt li gt           lt div class  quot test1 quot  gt  lt  div gt           lt div class  quot test1 quot  gt width2 lt  div gt           lt div class  quot test1 quot  gt width3 lt  div gt         lt  li gt       lt  ul gt    lt  div gt

User · Accepted Answer

a div usually needs at least a non-breaking space   amp nbsp   in order to have a width

User · Answer

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

User · Answer

You add to this DIV s CSS position  relative  it will do all the work

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try to add display block  to your test1

User · Answer

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  amp nbsp  inside DIV  this sometimes can bring unexpected effects eg  in combination with text-decoration  underline

User · Answer

amp  160  may do the trick  works in XSL docs

User · Answer

Either use padding   height or  amp nbsp  for width to take effect with empty div  EDIT   Non zero min-height also works great

User · Answer

If you set display  to inline-block  block  flex       on the element with no content  then For min-width to take effect on a tag with no content  you only need to apply padding for either top or bot  For min-height to take effect on a tag with no content  you only need to apply padding for left or right  This example showcases it  here I only sat the padding-left for the min-width to take effect on an empty span tag

User · Answer

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    x000D   x000D   shape-round  x000D    width  40px  x000D    min-height  40px  x000D    background   FF0000  x000D    border-radius  50   x000D    x000D   lt div class  shape-round  gt  lt  div gt  x000D   x000D   x000D

[html] How to make a div with no content have a width?

Examples related to html

Examples related to css

Examples related to width

Examples related to css-float