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:
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
<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>
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
It has width but no content or height. Add a height attribute to the class test1.
  may do the trick; works in XSL docs
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";
}
You add to this DIV's CSS position: relative, it will do all the work.
Either use padding , height or   for width to take effect with empty div
EDIT:
Non zero min-height also works great
Try to add display:block; to your test1
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{_x000D_
width: 40px;_x000D_
min-height: 40px;_x000D_
background: #FF0000;_x000D_
border-radius: 50%;_x000D_
}<div class="shape-round"></div>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.
There are different methods to make the empty DIV with float: left or float: right visible.
Here presents the ones I know:
width(or min-width) with height (or min-height)padding-toppadding-bottomborder-topborder-bottom::before or ::after with:
{content: "\200B";} {content: "."; visibility: hidden;} inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)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.
Source: Stackoverflow.com
