If you look at my example, the divs should be red, blue, green, yellow.

http://www.chrispaul.ws/ul-li-anchor-sprites/

But the blue div width is zero even though I give it a width. Why?

<div style="width: 500px; height: 400px;">
    <div style="float: left; display: inline; background-color: red;">
        some text <span class="pipe">|</span> text <span class="pipe">|</span> text
    </div>
    <div style="float: left; display: inline; width: 200px; background-color: blue;">
        <div style="position: absolute; width: 200px;">
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="float: left; height: 18px; width: 22px;"><a href="http://twitter.com/" style="background-image: url('icons.png'); background-repeat: no-repeat; display: block; height: 16px; text-indent: -5000px; width: 16px;">Twitter</a></li> 
                <li style="float: left; height: 18px; width: 22px;"><a href="http://www.facebook.com/" style="background-image: url('icons.png'); background-repeat: no-repeat; display: block; height: 16px; text-indent: -5000px; width: 16px; background-position: -20px 0px">Facebook</a></li>
                <li style="float: left; height: 18px; width: 22px;"><a href="http://www.flickr.com/" style="background-image: url('icons.png'); background-repeat: no-repeat; display: block; height: 16px; text-indent: -5000px; width: 16px; background-position: -40px 0px;">flickr</a></li>
                <li style="float: left; height: 18px; width: 22px;"><a href="http://www.youtube.com/" style="background-image: url('icons.png'); background-repeat: no-repeat; display: block; height: 16px; text-indent: -5000px; width: 16px; background-position: -60px 0px;">YouTube</a></li>
            </ul>
        </div>
    </div>

    <div style="float: left; display: inline; background-color: green;">            
        text text
    </div>

    <div style="float: left; display: inline; background-color: yellow;">
        text text
    </div>
</div>

2 answers

0
points
This was chosen as the best answer

I think it's because of the <div style="position: absolute; width: 200px;"> - Do you need to position:absolute; this? Try without it or position: relative;.

Answered about 9 years ago by ReMichael
  • Ah ok. The absolute positioning brings it out of the "flow." Thanks. Chris Paul about 9 years ago
0
points

Even if you're just fleshing things out man, please don't use inline styles. Set up a skeleton file set that you can just drop into. Personally looking at css like this just gives me headaches.

Answered about 9 years ago by migsims
  • I thought it would be easier to debug, so I put the css in inline styles. Maybe not. Chris Paul about 9 years ago