Can I "override" the width of an HTML element with CSS?

Question

I'm doing some work with CSS, and I have an <li> element with a <div> element inside of it. The <div> element assumes the width of the enclosing <li> element, but the text content inside the <div> is wider than the <li> (and therefore goes onto two lines). What I want to do is make the <div> the same width as its longest text element, does anyone know how I can do this? Thanks.

<ul style="display: inline-block; list-item-style: none">
  <li id="foo" style="float: left; list-style-type: none; position: relative;">
    <a href="...">brief text</a>
    <div id="bar" style="position: absolute; width=???">
      <ul>
        <li>a long chunk of text</li>
        <li>an even longer piece of text</li>
      </ul>
    </div>
  </li>
</ul>

Right now, the width of div#bar is equal to 100% of the width of its enclosing element, li#foo, and the width of li#foo is equal to the width of the text in its <a> tag (plus padding and borders). What I want to do is make div#bar be the width of <li>an even longer piece of text</li>, but I can't figure out how to accomplish that, even with Javascript.... or am I going to be forced to use an absolute measurement for the width? Any advice would be greatly appreciated.

Is there a reason why div#bar has absolute positioning?

Mr Griever
– Mr Griever

2011-01-28 18:23:20 +00:00
Commented Jan 28, 2011 at 18:23 — Mr Griever
– Mr Griever, Commented Jan 28, 2011 at 18:23

chprpipr · Accepted Answer · 2011-01-28 18:00:10Z

7

Strip out the position attributes from #foo and #bar.

Then add:

<style type="text/css">
#bar li { white-space:nowrap !important; }
</style>

answered Jan 28, 2011 at 18:00

chprpipr

2,02916 silver badges17 bronze badges

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

2 Comments

Brad Christie Over a year ago

+1 for clean solution, and paying attention to the OP wanting it to grow with content.

jay Over a year ago

Thank you. Not quite sure what those position attributes were doing there in the first place.

adardesign · Accepted Answer · 2011-01-28 17:55:03Z

2

put !important after the style value before ;

Sample:

#element{ width:500px!important;}

answered Jan 28, 2011 at 17:55

adardesign

36.2k15 gold badges67 silver badges86 bronze badges

Comments

Dutchie432 · Accepted Answer · 2011-01-28 17:55:59Z

0

try

width:500px instead of width=500px (replace 500 with desired width)

http://jsfiddle.net/p4YNA/

answered Jan 28, 2011 at 17:55

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

Comments

Mr Griever · Accepted Answer · 2011-01-28 17:57:07Z

0

<ul style="display: inline-block; list-item-style: none">
  <li id="foo" style="float: left; list-style-type: none; position: relative;">
 <a href="...">brief text</a>
 <div id="bar" style="float:left;">
   <ul>
  <li>a long chunk of text</li>
  <li>an even longer piece of text</li>
   </ul>
 </div>
  </li>
</ul>

answered Jan 28, 2011 at 17:57

Mr Griever

4,0233 gold badges26 silver badges41 bronze badges

Comments

stoneMonkey77 · Accepted Answer · 2011-01-28 18:02:15Z

0

If you can remove the display: inline-block from the outer <ul/> and remove float: left from the foo <li/> then the list will expand to the longest element.

answered Jan 28, 2011 at 18:02

stoneMonkey77

1754 bronze badges

Comments

Sotiris · Accepted Answer · 2011-01-28 18:04:23Z

0

A solution could be to use a fixed width for the #bar. A second solution is to remove position:absolute; from #bar.

answered Jan 28, 2011 at 18:04

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Comments

yvoyer · Accepted Answer · 2011-01-28 18:33:37Z

0

According to the specification, you ~~can~~ can't (see edit) overide it by using a combination of rules that is stronger than the element style.

Element style (style="XXX") = 1000
Id (#id)                    = 100
Class (.class)              = 10
element (ie: p)             = 1

So if you are able to specify a css rule with more than 1000, I think you could do it.

EDIT: After some test, if found that a style defined directly in an element can't be overiden by css with this method. Sorry.

edited Jan 28, 2011 at 18:33

answered Jan 28, 2011 at 18:02

yvoyer

7,5465 gold badges35 silver badges37 bronze badges

1 Comment

Brad Christie Over a year ago

You can also use !important to override which basically resets the weight attribute and is now only competing against other "!important" styles.

Collectives™ on Stack Overflow

Can I "override" the width of an HTML element with CSS?

7 Answers 7

2 Comments

Sample:

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Sample:

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related