140

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>
1
  • 2
    Just add a height value
    – nCardot
    Commented Feb 26, 2021 at 3:37

15 Answers 15

189

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

5
  • 41
    use "display:inline-block"
    – Luccas
    Commented May 17, 2012 at 5:14
  • good solution,if i use " " instead of &nbsp; it does not work.but why?
    – 王奕然
    Commented Aug 28, 2013 at 3:15
  • 2
    '&nbsp;' is a good technique as opposed to min-height because it doesn't force a height. Say your font-size is set to 16px and your padding is 15px. Your div will retain the same height before and after text is added to the div (assuming it's all on one line)
    – eroedig
    Commented Jul 16, 2015 at 18:56
  • 1
    to me, putting a space doesn't work! the div with width 100px and within &nbsp; doesn't look like to be 100px in a div with flex inline elements
    – Micky
    Commented Sep 27, 2018 at 12:10
  • @Luccas or anyone who knows, why does "inline-block" work? I would expect the same behavior with the div's default block. Commented Jun 29, 2022 at 13:30
106

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

EDIT:

Non zero min-height also works great

3
  • 6
    I prefer the padding solution, any padding greater than 0 will work. That way you don't have a weird, selectable &nbsp; in the div. Commented Apr 12, 2013 at 18:20
  • 1
    Please note: for padding solution you need to provide both left/right and top/bottom padding for it to work.
    – Govind Rai
    Commented Feb 2, 2017 at 17:43
  • 1
    padding didn't work for me, but min-height: 1px Commented Nov 22, 2021 at 13:09
72

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.

3
  • 2
    Your solutions seems the cleanest to me, but I have been trying to find the reason for this in the CSS spec and I can't find it anywhere, the nearest I found is in CSS 2.1, 9.5 Floats where it says Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., but it talks about line boxes i.e. lines in a paragraph, but not about adjacent boxes. Anyone more familiar with CSS spec? Commented Apr 27, 2014 at 22:28
  • This worked the best for me. I tried most of the other suggestions on here except &nbsp;.
    – ayahuasca
    Commented Jul 16, 2015 at 6:59
  • If you try this method and it's not working, then in addition to the setting min-height also set display to "block" or "inline-block" and width to 100%. That works for me.
    – lflier
    Commented Oct 27, 2020 at 17:47
36

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";
}
1
  • Seems better than the accepted answer.
    – user8393310
    Commented Aug 12, 2022 at 15:28
11

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

8

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 &nbsp; inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)
3

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>

1
  • 1
    min-height isn't necessary, just adding height does the trick
    – nCardot
    Commented Feb 26, 2021 at 3:36
1

Try to add display:block; to your test1

0
1

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

1

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

Perhaps the most elegant:

display: inline-block;

(credit: @Luccas suggestion in a comment under the top answer)

0

&#160; may do the trick; works in XSL docs

0

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

0

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.

0

Same problem, my initial css is width: 5px, updating it to min-width: 5px made the contentless div appear! No need for extra height/min-height/padding/display properties

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.