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.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
The only way to override inline style is by using ! important keyword beside the CSS rule.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
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.
You can override element inline style like this:
div[style] {
background: yellow !important;
height: auto!important
}
Check out this fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With