CODEWITHSUNDEEP
css
JasonDavis
JasonDavis

Reputation: 48933

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

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?

Upvotes: 3

Views: 3029

Answers (1)

Brian L
Brian L

Reputation: 3251

One thing you can try is to set min-width: 100%; and then set display:inline-block; This will mean that the width is determined by the content (having preformatted content means that it won't wrap either), but it won't shrink inappropriately because of the minimum width. You may find it desirable to set a max-width as well.

Aside: be careful of over-using the !important directive - usually it isn't necessary if you are specific with your selectors, and sometimes it messes up accessibility (e.g. if someone requires an overriding stylesheet to view webpages).

Upvotes: 2

Related Questions