-1

In this fiddle

http://jsfiddle.net/sjD24/6/

I have a table ( or matrix have you ) of bookmarks. Each row is labeled with a tag. I need this column to have a constant width.

The class ( or column ) that needs the constant width is

.tag_hold

I tried the obvious of 

width: 100px:

but this had no observable effect.

nativist.bill.cutting
  • 1,042
  • 3
  • 9
  • 19
  • 1
    display: inline-block, http://jsfiddle.net/sjD24/9/ – cske Nov 19 '13 at 15:13
  • 2
    use a `` here!
     – andi Nov 19 '13 at 15:14
  • 1
    @nativist.bill.cutting Saying I don't use tables as a personal choice is like saying, "I don't use vowels." It's not a matter of your personal choice, its a matter of standards. – Dan Grahn Nov 19 '13 at 15:17
  • 1
    @nativist.bill.cutting It's not a matter of it "not hindering you," it's a matter of your adherence to community standards. When you choose to ignore standards you are writing code which is not maintainable. This diminishes the value of your application and your perceived value by future employers. Here is a great article on [when and why to use tables and not divs](http://www.noupe.com/how-tos/better-ui-design-proper-use-of-tables.html). The best thing is that you actually say, "I have a table." – Dan Grahn Nov 19 '13 at 15:19
  • @nativist.bill.cutting One more comment. Your image tags are missing the slash. They should be `` – Dan Grahn Nov 19 '13 at 15:22
  • @screenmutt: http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 – isherwood Nov 19 '13 at 15:23
  • This is an HTML 5 doc - see http://stackoverflow.com/questions/7366344/do-we-still-need-end-slashes-in-html5 – nativist.bill.cutting Nov 19 '13 at 15:23
  • @isherwood I recant. I forgot they weren't required anymore. However, a lot of editors will base syntax highlighting on them. – Dan Grahn Nov 19 '13 at 15:26
  • possible duplicate of [How to Set a Fixed Width for a Div Element with Display Inline?](http://stackoverflow.com/questions/8262459/how-to-set-a-fixed-width-for-a-div-element-with-display-inline) – isherwood Nov 19 '13 at 15:26
  • @nativist.bill.cutting [Divs vs Tables](http://stackoverflow.com/questions/6637629/divs-vs-tables-for-tabular-data) – Dan Grahn Nov 19 '13 at 15:26
  • 1
    True. Fiddle among them. – isherwood Nov 19 '13 at 15:27

5 Answers5

2

You can't set a width on an inline element, so that's why the width doesn't have any effect. Try display: inline-block; instead of display: inline;.

That said, if this is for tabular data, that's exactly what <table> is for – no need to reinvent the wheel.

daGUY
  • 22,638
  • 27
  • 70
  • 113
1

The reason why is isn't working is because display is inline when it should be inline-block

http://jsfiddle.net/sjD24/11/

David Nguyen
  • 7,953
  • 2
  • 27
  • 49
1

Change the display: inline; for display: inline-block;

.tag_hold{
    position: relative;
    top: -2px;
    display: inline-block;
    font-size: 13px;
    color: #000000;
    padding: 0px 0px 0px 0px;
    width:100px;
}
Ana
  • 96
  • 1
  • 4
0

display:inline makes the browser ignore the width and push the element regardless. What you would have to do is display:block or display:inline-block and float the elements depending on the look you want.

or use Twitter Bootstrap...

Phil
  • 10,007
  • 15
  • 62
  • 93
0

As the other answers say you should use inline-block

I took the time to clean up your css a bit as it has some unnecessary css
http://jsfiddle.net/sjD24/12/

Dejan.S
  • 16,281
  • 21
  • 64
  • 104