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

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

score 184 · Accepted Answer · answered Nov 13 '10 at 06:31

184

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

answered Nov 13 '10 at 06:31

jcomeau_ictx

37,688
6
92
107

37

use "display:inline-block" – Luccas May 17 '12 at 05:14
good solution,if i use " " instead of it does not work.but why? – 王奕然 Aug 28 '13 at 03:15
2

' ' 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 Jul 16 '15 at 18:56
1

to me, putting a space doesn't work! the div with width 100px and within doesn't look like to be 100px in a div with flex inline elements – Micky Sep 27 '18 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. – skillit zimberg Jun 29 '22 at 13:30

ArK · Answer 2 · 2016-09-07T06:23:35.063

105

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

EDIT:

Non zero min-height also works great

edited Sep 07 '16 at 06:23

answered Nov 13 '10 at 06:55

ArK

20,698
67
109
136

6

I prefer the padding solution, any padding greater than 0 will work. That way you don't have a weird, selectable ` ` in the `div`. – Brian Duncan Apr 12 '13 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 Feb 02 '17 at 17:43
padding didn't work for me, but min-height: 1px – GarfieldKlon Nov 22 '21 at 13:09

score 72 · Answer 3 · answered Aug 24 '13 at 23:31

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.

answered Aug 24 '13 at 23:31

riley

2,387
1
25
31

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? – Jaime Hablutzel Apr 27 '14 at 22:28
This worked the best for me. I tried most of the other suggestions on here except . – ayahuasca Jul 16 '15 at 06: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 Oct 27 '20 at 17:47

score 34 · Answer 4 · answered Dec 03 '15 at 19:21

34

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

answered Dec 03 '15 at 19:21

BernardV

1,700
20
15

Seems better than the accepted answer. – balanceglove2 Aug 12 '22 at 15:28

score 11 · Answer 5 · answered Nov 13 '10 at 07:00

11

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

answered Nov 13 '10 at 07:00

Michael

4,188
2
14
6

simhumileco · Answer 6 · 2018-03-16T17:18:35.640

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

score 3 · Answer 7 · answered Feb 12 '18 at 03:47

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>

answered Feb 12 '18 at 03:47

Bhaskar Pramanik

191
2
7

1

min-height isn't necessary, just adding height does the trick – nCardot Feb 26 '21 at 03:36

score 1 · Answer 8 · edited Nov 26 '15 at 01:52

1

Try to add display:block; to your test1

edited Nov 26 '15 at 01:52

mshsayem

17,557
11
61
69

answered Nov 26 '15 at 01:24

DevenX

19
1

score 1 · Answer 9 · answered May 21 '20 at 19:23

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

score 1 · Answer 10 · answered Mar 07 '22 at 09:15

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

answered Mar 07 '22 at 09:15

Navid Shad

738
7
15

score 0 · Answer 11 · answered Sep 01 '15 at 13:29

0

  may do the trick; works in XSL docs

answered Sep 01 '15 at 13:29

Daniel Forrest

51
5

Sebastian Nielsen · Answer 12 · 2021-01-21T11:37:03.660

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

Abraham · Answer 13 · 2021-04-18T12:34:31.317

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.

edited Apr 18 '21 at 12:34

answered Apr 18 '21 at 12:28

Abraham

12,140
4
56
92

score 0 · Answer 14 · answered Jun 24 '22 at 15:34

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

answered Jun 24 '22 at 15:34

felc

61
1
3

score 0 · Answer 15 · answered Jul 28 '22 at 01:03

0

Perhaps the most elegant:

display: inline-block;

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

answered Jul 28 '22 at 01:03

ellockie

3,730
6
42
44

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

CSS

HTML

15 Answers15

Linked