Question

I have a problem and I have no idea how to fix it.

So here it is:

I am trying to display a number of text chunks one above the other. All of them are contained in nice text blocks. To implement the blocks I am using divs with a set width. It was all nice and fancy until I have tested my code in FF – and guess what? My little precious divs stretch or squeeze to envelop the content. What do I do to make them display properly in FF? Chrome and IE work perfectly well.

Here’s the code I am using for the text blocks:

css:

#block {
    border: 2px dashed grey;
    background-color:  #D3D3D3;
    width: 338 px;
    margin-top: 10px;
}

.left {
float:right;
margin-right: 10px;
}

html:

<div id="block" class="left">
    <p>A long line of text that should take more than one line to display, 
       because I like long sentences - it is easy to get lost in them and 
       forget what you were writing about.</p>
</div>

<div style="clear:both"></div>

<div id="block" class="left">
    <p>two words</p>
</div>

Thank you very much. Like real much.

Answer 1

Rince, your issue is very simple. When you put the space in between 338 and px in your width:, FireFox cannot interpret it as a unit and so it ignores that line. Just remove the space and it works quite dandily