CSS - fixed width span/div

Question

I am trying to layout the content for a popup dialog box, but not having much luck

I've tried using both spans and inline divs, but neither of them seem to respect the width or min-width CSS

any ideas?

Here's the Html

<div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0">

<div class="popupKey">Bank Reference</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Amount</div>
<div class="popupValue">650.00</div>
<br>
<div class="popupKey">Currency</div>
<div class="popupValue">GBP</div>
<br>
<div class="popupKey">PaymentDate</div>
<div class="popupValue">02/06/2011</div>
<br>
<div class="popupKey">Remitter</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Senders Reference</div>
<div class="popupValue"></div>
<br>
</div>

and the CSS

.popupKey
{
    display : inline;
    min-width: 150px;
}

.popupValue
{
    display : inline;
    min-width: 150px;
}

I would like all the items in the popupValue column to be aligned

there's a JSFiddle here:

http://jsfiddle.net/NtK4Y/

Chuck Norris · Accepted Answer · 2012-04-13 08:53:00Z

25

Inline content can't have a width defined. Try using display: inline-block or using display: block; float: left;

I've updated your jsfiddle; have a look at http://jsfiddle.net/NtK4Y/1/

edited Apr 13, 2012 at 8:53

Chuck Norris

15.2k15 gold badges96 silver badges128 bronze badges

answered Apr 13, 2012 at 8:29

Arno

1,25314 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mkk Over a year ago

if you add float: left; you automatically declare element as block, so in that case I believe display: block is unnecessary

Chuck Norris · Accepted Answer · 2012-04-13 08:30:12Z

6

Use inline-block instead of inline.

You can see updated jsfiddle http://jsfiddle.net/NtK4Y/2/

answered Apr 13, 2012 at 8:30

Chuck Norris

15.2k15 gold badges96 silver badges128 bronze badges

Comments

Chuck Norris · Accepted Answer · 2012-04-13 08:53:08Z

1

A float:left also might help your problem, they will be placed next to each other.

edited Apr 13, 2012 at 8:53

Chuck Norris

15.2k15 gold badges96 silver badges128 bronze badges

answered Apr 13, 2012 at 8:40

mparryy

3842 silver badges18 bronze badges

Collectives™ on Stack Overflow

CSS - fixed width span/div

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related