CodeMoose CodeMoose - 3 months ago 21
CSS Question

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

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:

enter image description here

Is there a way to override the inline width and allow the container div
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 - thanks!


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

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

.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.