I have a line of text, within a <span> tag, which I want to assign a fixed width. This is immediately proceeded by more text within another <span> tag.
I have tried assigning a width property, using <span style="width:100px;"> but this doesn't seem to work, and the width stays just as wide as the text.
When I switch the <span> tag to a <div> tag, the width property seems to work, but I do not want the element displayed as a block-level element. If I use <div style="width:100px; display:inline;">, the width property no longer has any effect.
Why is this happening, and how can I solve it? Please can anyone advise.That's because you can't give an inline element a width, what you could do is assign a div tag a width, then apply float:left to it. Floats can be quite a tricky business though if you don't fully know how they work, I recommend that you give this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating">http://www.autisticcuckoo.net/archive.p ... 0/floating</a><!-- m -->) a read then experiment for a bit.That's because you can't give an inline element a width, what you could do is assign a div tag a width, then apply float:left to it. Floats can be quite a tricky business though if you don't fully know how they work, I recommend that you give this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating">http://www.autisticcuckoo.net/archive.p ... 0/floating</a><!-- m -->) a read then experiment for a bit.
Excellent. I'm comfortable with floats so I'll try that. Thanks for your help.If if gives you any bother then I'd be happy to have a look at the code and try and help.1. Giving text elements fixed width in pixels is a bad idea - if user decides to adjust font size your layout will most probably blow up.
2. To make inline box try
display: -moz-inline-box;
display: inline-block;-tested in Gecko and IE6.0
I have tried assigning a width property, using <span style="width:100px;"> but this doesn't seem to work, and the width stays just as wide as the text.
When I switch the <span> tag to a <div> tag, the width property seems to work, but I do not want the element displayed as a block-level element. If I use <div style="width:100px; display:inline;">, the width property no longer has any effect.
Why is this happening, and how can I solve it? Please can anyone advise.That's because you can't give an inline element a width, what you could do is assign a div tag a width, then apply float:left to it. Floats can be quite a tricky business though if you don't fully know how they work, I recommend that you give this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating">http://www.autisticcuckoo.net/archive.p ... 0/floating</a><!-- m -->) a read then experiment for a bit.That's because you can't give an inline element a width, what you could do is assign a div tag a width, then apply float:left to it. Floats can be quite a tricky business though if you don't fully know how they work, I recommend that you give this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating">http://www.autisticcuckoo.net/archive.p ... 0/floating</a><!-- m -->) a read then experiment for a bit.
Excellent. I'm comfortable with floats so I'll try that. Thanks for your help.If if gives you any bother then I'd be happy to have a look at the code and try and help.1. Giving text elements fixed width in pixels is a bad idea - if user decides to adjust font size your layout will most probably blow up.
2. To make inline box try
display: -moz-inline-box;
display: inline-block;-tested in Gecko and IE6.0