Overriding <div> inline width style to make element stretch to contents?

Question

Working on reskinning a client's intranet. I can't modify existing HTML, only provide an override stylesheet.

Within the HTML is a body content wrapper - any time the window is resized, it gets an explicit width and height set inline to the window width and height:

<div id="s4-workspace" style="height: 660px; width: 1331px;">

Now, some pages have a large table within this content wrapper (at least 1600px wide) and when the window is smaller than this, the table breaks out of the container leaving behind all background and padding. All other elements obey the wrapper width, creating a whole bunch of negative space when scrolling right:

Is there a way to override the inline width and allow the container div #s4-workspace to stretch to its contents? My best guess was setting width: auto !important;, but chrome and firefox still prioritize the inline style. Any help is appreciated.

Solution 1

In your specific instance (overriding width/height to prevent content overflow), changing the display type will do what you need:

http://cssdeck.com/labs/kfpnpruw

<div class="foo" style="width: 400px; height: 300px;">
  Foo
  <img src="http://placekitten.com/600/300" /><!-- 600x300 image -->
</div>

.foo {
  background: yellow;
  display: table-cell;
  padding: .5em;
}

Elements set to table-cell will treat width and height properties as a suggested value, rather than an absolute value.

Solution 2

You can override element inline style like this:

div[style] {
   background: yellow !important;
    height: auto!important
}

Check out this fiddle

Comments

[CodeMoose]

Exactly what I needed. Thanks so much!