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

html css width css-float

164,645

Solution 1

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

Solution 2

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

EDIT:

Non zero min-height also works great

Solution 3

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

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

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

View more solutions

164,645

Author by

runeveryday

Updated on April 19, 2021

Comments

runeveryday about 3 years

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>

Luccas about 12 years

use "display:inline-block"
Brian Duncan about 11 years

I prefer the padding solution, any padding greater than 0 will work. That way you don't have a weird, selectable   in the div.
王奕然 almost 11 years

good solution,if i use " " instead of   it does not work.but why?
Jaime Hablutzel about 10 years

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?
ayahuasca almost 9 years

This worked the best for me. I tried most of the other suggestions on here except  .
eroedig almost 9 years

' ' 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)
Govind Rai over 7 years

Please note: for padding solution you need to provide both left/right and top/bottom padding for it to work.
Micky almost 6 years

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
lflier over 3 years

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.
nCardot over 3 years

min-height isn't necessary, just adding height does the trick
GarfieldKlon over 2 years

padding didn't work for me, but min-height: 1px
skillit zimberg almost 2 years

@Luccas or anyone who knows, why does "inline-block" work? I would expect the same behavior with the div's default block.