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

Html Problem Overview

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

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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

EDIT:

Non zero min-height also works great

Solution 3 - Html

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.

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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

Solution 7 - Html

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>

Solution 8 - Html

Try to add display:block; to your test1

Solution 9 - Html

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

Solution 10 - Html

  may do the trick; works in XSL docs

Solution 11 - Html

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

Solution 12 - Html

You can use position:absolute to assign width and height directly, without any content.

that can easily do it if you are considering a single div.

Solution 13 - Html

By defining min width/hright for your element you can render it without content:

<div class="your-element"><div>

.your-element {
  min-width: 100px;
  min-height: 20px;

  // This is only for observing the element space
  background: blue;
}

Solution 14 - Html

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

Content Type	Original Author	Original Content on Stackoverflow
Question	runeveryday	View Question on Stackoverflow
Solution 1 - Html	jcomeau_ictx	View Answer on Stackoverflow
Solution 2 - Html	ArK	View Answer on Stackoverflow
Solution 3 - Html	riley	View Answer on Stackoverflow
Solution 4 - Html	BernardV	View Answer on Stackoverflow
Solution 5 - Html	Michael	View Answer on Stackoverflow
Solution 6 - Html	simhumileco	View Answer on Stackoverflow
Solution 7 - Html	Bhaskar Pramanik	View Answer on Stackoverflow
Solution 8 - Html	DevenX	View Answer on Stackoverflow
Solution 9 - Html	deathfry	View Answer on Stackoverflow
Solution 10 - Html	Daniel Forrest	View Answer on Stackoverflow
Solution 11 - Html	Sebastian Nielsen	View Answer on Stackoverflow
Solution 12 - Html	Abraham	View Answer on Stackoverflow
Solution 13 - Html	Navid Shad	View Answer on Stackoverflow
Solution 14 - Html	Krzysztof AN	View Answer on Stackoverflow