Expand a CSS Div only if content stretches it
I am working on a new blog site, it will document my code and such.  I have a syntax highlighter which looks like the image below...



----------


![enter image description here][1]


----------

I have this CSS

    .syntaxhighlighter {
      width: 100% !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      overflow: auto !important;
      overflow-y: hidden !important;
      font-size: .9em !important;
    }
    
    .syntaxhighlighter:hover {
      width: 135% !important;
    }

As you can see in the image, the syntax highlited code is a certain width to fit in my layout, I am experimenting with making it wider when hovered for when the there is code that makes it wider then my content div.

That is where I added the `.syntaxhighlighter:hover` class and it works, when I hover the sytax highlighter div, it expands to the width I set.  Now the only thing I am hoping to change if it's even possible....

I would like to somehow only expand the highlighter div width IF the code inside it stretches beyond the normal width.

Can anyone help me with this?


  [1]: http://i.stack.imgur.com/qYfYZ.jpg
Expand a CSS Div only if content stretches it
===

I am working on a new blog site, it will document my code and such.  I have a syntax highlighter which looks like the image below...



----------


![enter image description here][1]


----------

I have this CSS

    .syntaxhighlighter {
      width: 100% !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      overflow: auto !important;
      overflow-y: hidden !important;
      font-size: .9em !important;
    }
    
    .syntaxhighlighter:hover {
      width: 135% !important;
    }

As you can see in the image, the syntax highlited code is a certain width to fit in my layout, I am experimenting with making it wider when hovered for when the there is code that makes it wider then my content div.

That is where I added the `.syntaxhighlighter:hover` class and it works, when I hover the sytax highlighter div, it expands to the width I set.  Now the only thing I am hoping to change if it's even possible....

I would like to somehow only expand the highlighter div width IF the code inside it stretches beyond the normal width.

Can anyone help me with this?


  [1]: http://i.stack.imgur.com/qYfYZ.jpg