Why won't this div resize given position:relative; left:0px; right: 200px;

Question

I want the third div down, "contents", to fill its container but leave exactly 200px of space on the right side to fit the fixedWidthButtons.

So far, no matter what I set right to, it doesn't affect the width of the div.

If I set its display:block; it fills the container completely and the buttons get pushed out of the container.
If I set the display:inline-block;, the container becomes 181.344 px wide and won't resize no matter what I set right to.

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

If i understand this correctly, you are trying to declare the width of the div by giving it left and right properties. As far as I know, you have to declare the width of the div by declaring just that. Left and Right are positioning declarations. (http://www.w3schools.com/CSSref/pr_pos_right.asp) — Falk, Nov 03 '16 at 20:30
But I can use right:0; left:0; to get the width to 100% right? — Glen Pierce, Nov 03 '16 at 20:33
From here: http://alistapart.com/article/conflictingabsolutepositions — Glen Pierce, Nov 03 '16 at 20:45
@GlenPierce Only when you're using `position: absolute;`. `position: relative;` serves completely different purposes. — connexo, Nov 03 '16 at 21:22

score 2 · Answer 1 · answered Nov 03 '16 at 20:32

2

You need to read up on some of properties you're dealing with. Position is for a point of origin not width.

You also express some issues with block versus inline-block these are easily googled. That said a solution to your problem is to change the css:

.content {
    display: inline-block;
    width: calc(100% - 200px);
}

answered Nov 03 '16 at 20:32

Culyx

529
10
18

Yes, this would solve the problem, I'm using gwt though and haven't been able to get calc() to work so I was hoping that I could achieve something similar with just left and right. – Glen Pierce Nov 03 '16 at 20:35
As I said the left and right parameters of position are more concerned with where the window is not the size of it. As for the issue with the calc are you leaving spaces around the arithmetic symbols? See this topic for those details: http://stackoverflow.com/questions/16290873/css3-calc-not-working-in-latest-chrome – Culyx Nov 03 '16 at 21:13
1

If you fail to get `calc()` to work, you're probably omitting the blank between arguments and operators. – connexo Nov 03 '16 at 21:24
@connexo, you mean I need white space between 100%, -, and 200px? – Glen Pierce Nov 03 '16 at 21:50
.getElement().getStyle().setProperty("width", "calc(100% - 200px)") works in gwt :) Awesome, thanks :) – Glen Pierce Nov 03 '16 at 22:42

L J · Answer 2 · 2016-11-03T21:19:21.663

Few suggestions:

position: absolute works relative to where its relative is (parent who is positioned relative is).
position: relative informs that the element is not positioned (without changing the layout at all) and make it's children if set to absolute position behave relative to it's parent
Setting inline-block also give us the provision of setting width and height which it would adjust to; if that is not needed, better off to go with inline.
It is good to remove the inline-styles - sample snippet below

.container {
  margin-bottom: 10px;
  height: 65px;
  border: 1px solid black;
  position: relative;
}
.contents {
  border: 1px solid grey;
  position: absolute;
  display: inline-block;
  width: 300px;
  left: 0;
}
.fixedWidthButtons {
  display: inline-block;
  width: 200px;
  position: absolute;
  right: 0;
  border: 1px solid red;
}

<div class="container">
  <div class="panel">
    <div class="contents">
      <div class="buttonTextAndCounterContainer">
        <div class="button">button</div>
        <div class="textAndCounterContainer">
          <div class="counter">counter</div>
          <div class="text">text</div>
        </div>
      </div>
    </div>
    <div class="fixedWidthButtons">For my buttons</div>
  </div>
</div>

Your code snippet is so much more legible than mine, nice job. — Glen Pierce, Nov 03 '16 at 21:51
Thank you for the advice that "position: absolute works relative to where its relative is (parent who is positioned relative is)." That is super-helpful since obviously, I really wanted to take advantage of position: relative. — Glen Pierce, Nov 03 '16 at 21:56

score 0 · Answer 3 · answered Nov 03 '16 at 20:49

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

answered Nov 03 '16 at 20:49

Glen Pierce

4,401
5
31
50

Why won't this div resize given position:relative; left:0px; right: 200px;

3 Answers3