CODEWITHSUNDEEP
css
ale
ale

Reputation: 811

Firefox issue - inline DIV with text

I can't figure out a way to make this work in Firefox and I'm hoping you can give me some suggestions. I need all the text inside the DIV class .inline-text to appear besides the LABEL and wrap based on the available width. It works fine in IE but Firefox doesn't like it and pushes it the entire block onto a new line. It would work fine if I set the .inline-text to have a fixed width, but unfortunately for my project I can't do that so I need a way for this to be "liquid" and still appear inline.

My CSS:

#container {
width:530px;
}
label {
font-weight:bold;
text-align:right;
width:130px;
margin-right:20px;
float:left;
display:inline;
}
.inline-text {
float:left;
display:inline;
}

My HTML

<div id="container">
<label>A label</label>
<div class="inline-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean   commodo ligula eget dolor.  Aenean massa.  Cum sociis natoque penatibus   et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>

Upvotes: 0

Views: 579

Answers (2)

RoToRa
RoToRa

Reputation: 38441

If I understand you correctly, this is what you want:

.inline-text {
  margin-left: 150px;
}

Upvotes: 1

Sotiris
Sotiris

Reputation: 40096

delete float:left; from .inline-text and the width:130px; from label

example: http://jsbin.com/usozi3

Upvotes: 0

Related Questions