-2

Suggestions for improving this question are encouraged. I'll update this question to more precisely explain what caused the problem once we figure out what was causing it to help those with a similar DOM structure.

Goal: Get the contents div to stretch from the left side of the panel to the edge of the fixed width buttons which are 200px wide.

<div class="container" style="left:0; right:0; margin-bottom: 10px; height: 65px; display: block;">
    <div class="panel" style="width:100%; display: block;">
        <div class="contents" style="display:inline-block; position:relative; left: 0px; right: 200px;">
            <div class="buttonTextAndCounterContainer" style="width:100%; display:block">
                <div class="button" style="float:left; display:none;"></div>
                <div class="textAndCounterContainer" style="display:block;">
                    <div class="counter" style="float:right; display:block;"></div>
                    <div class="text" style="width:100%; position:relative; left:0px; vertical-align:top; display:inline-block;"></div>
                </div>
            </div>
        </div>
        <div class="fixedWidthButtons" style="display:inline-block; float:right;"></div>
    </div>
</div>

I see a few examples of how to set width this way, but few explanations of what can prevent it from working.

I have some elements in my HTML that are responding properly to css that is setting the width by using position: absolute; left: 0; right: 200px; however, I have one div which simply won't respond to both left AND right. I seem to be able to set it's left OR right, but if both are set, it only seems to calculate it's position based off of the left value.

  • I am not setting the width of the div anywhere.
    -I've tried setting width: auto;
    -I've tried setting position: absolute;
    -I've tried various values for left and right I'm not using variables
  • I'm not trying to center the div, I want to set it's width this way (specifically so that I can define it's width so that it will take up it's entire parent minus some other divs that may or may not be present who have fixed widths, the parent's width is variable)
  • The div is nested deep inside of several other layers, is there a setting in a parent container that might be causing this behavior? If so, what might prevent it?
  • I am setting the css in Javascript after the element has been created but before it's being added to its container, I don't think this is a timing problem, but it might be relevant.
  • Are there specific parent elements that might interfere?
  • Are there styles that might be inherited that might interfere?

What are some possible situations that can cause this css to fail to set the width of an element?

Here are some of the resources I've investigated, none of them seem to address my problem but they may be of interest to you:
Most relevant:
http://alistapart.com/article/conflictingabsolutepositions
https://www.sitepoint.com/css-sizing-absolute-position/

Less relevant to sizing, more about positioning:
http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
http://blog.teamtreehouse.com/css-positioning
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
https://css-tricks.com/centering-css-complete-guide/
CSS positioning to fill container: width vs. left/right?

Community
  • 1
  • 1
Glen Pierce
  • 4,401
  • 5
  • 31
  • 50
  • 2
    Even if it's closed source you could show some code. Can you not make a jsfiddle that just shows a reduced case, like the containers and the css for these specific boxes? – deadfishli Nov 02 '16 at 22:16
  • 2
    There is a wall of text, but no code (HTML and CSS). Please consider creating a minimal, concrete and verifiable example so that the community can help to troubleshoot. – Terry Nov 02 '16 at 22:18
  • I'll see if I can reproduce it in a simplified state and post that code. – Glen Pierce Nov 02 '16 at 22:26
  • Does it happen in all browsers? If you temporarily use **!important** on your CSS, does the issue go away? I would like to see an actual working example of this issue. – ppovoski Nov 02 '16 at 22:22
  • I'm working in Chrome 54 right now. I haven't tested in other browsers. I'll check Firefox and Edge and see if there's a difference and let you know. – Glen Pierce Nov 02 '16 at 22:24
  • I've updated this question to include some pseudo code. I hope this is helpful. – Glen Pierce Nov 03 '16 at 19:34

1 Answers1

0

Solution:

To set a div's width by using only left and right, you must set the div's position: absolute;

Source: http://alistapart.com/article/conflictingabsolutepositions

Glen Pierce
  • 4,401
  • 5
  • 31
  • 50