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

html css width css-float
runeveryday picture runeveryday · Nov 13, 2010 · Viewed 143.5k times · Source

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>

Answer

jcomeau_ictx picture jcomeau_ictx · Nov 13, 2010

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

Related questions

How to make children auto fit parent's width only with CSS?

I have a server-side component that generates a fluid layout "toolbar" using DIV without fixed width, generating many A inside it. Then I need customize that layout to make all A tags auto fit to the parent width. But the …

Read More
How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More