Margin-right broken on width 100%

Question

I have a DIV containing an image and a second DIV. The parent DIV is set to position: absolute; the child DIV is set to position: relative. The idea is that I display my photo caption on top of my image.

The child DIV should have 100% width of the parent, minus 10px on the left, right and bottom, plus a black background.

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

The left margin bumps .photo-caption outside the bounds of .article-container. The right margin doesn't seem to have any effect.

I've also tried fixing this with box-sizing. It seems to get the width of .photo-caption down to the parent width but there's still the overhang.

By the way, I think I can solve this using a container for `.photo-caption` and setting the padding left/right (instead of a margin). However, this doesn't seem as clean a solution. — Olly F, Mar 26 '12 at 18:13
Is the caption supposed to hide the bottom part of the image? — Mr Lister, Mar 26 '12 at 18:17
if you provide an image or a better description of what you want it will be easier to help — Carrie Kendall, Mar 26 '12 at 18:19
Here's an image to show what I'd like to do: http://i.imgur.com/fqEc7.png — Olly F, Mar 26 '12 at 18:35
Yes, exactly, the caption sits on top - within a semitransparent black container. — Olly F, Mar 26 '12 at 18:43

sandeep · Answer 1 · 2012-03-26T18:40:41.243

29

It's better if you remove width:100%. write like this:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

edited Mar 26 '12 at 18:40

answered Mar 26 '12 at 18:13

sandeep

91,313
23
137
155

Am I missing something? I'm also testing and if you don't put a width on the inner div, it will be as wide as its contents, not the surrounding div. – Mr Lister Mar 26 '12 at 18:36
@MrLister thanks for point out the issue because i didn't saw the position:absolute. Now check my updated anwser – sandeep Mar 26 '12 at 18:42
Yep, Lister, you're right. I need the background of photo-caption to go 100% width of the parent, minus ten pixels on the left/right side. – Olly F Mar 26 '12 at 18:46
Sandeep, Lister, thank you. I think your updated solution would also work. However, I've marked Sven's as solved (I read it first and it uses slightly less lines of code!). – Olly F Mar 26 '12 at 18:56
This is the right answer! Just note that if the parent is a flex box, this is unnecessary (and also wouldn't work). – Emperor Eto Dec 19 '20 at 23:38

score 19 · Accepted Answer · edited Feb 16 '19 at 16:20

19

An absolutely positioned element is positioned with top, left, right and bottom, not with margin.

edited Feb 16 '19 at 16:20

Marvin Fischer

2,552
3
23
34

answered Mar 26 '12 at 18:18

Sven Bieder

5,515
2
21
27

Agreed, I see. However, I would still need to fix the margin on the right hand-side. Here's an image to show what I'd like to do: i.imgur.com/fqEc7.png – Olly F Mar 26 '12 at 18:36
About what margin are you talking? For the photo-caption or for the article-container? – Sven Bieder Mar 26 '12 at 18:40
1

the photo caption should also be positioned by left, right, bottom. Then you also don't need the width 100% anymore. It makes in the moment so or so not really sense, because your photo-caption has a width of 100% + 20px in the moment. – Sven Bieder Mar 26 '12 at 18:48
You solved it! So, in summary, the element needs to be explicitly positioned instead of using margins. Width 100% can be removed and the element doesn't need box-sizing. – Olly F Mar 26 '12 at 18:54

score 16 · Answer 3 · answered Dec 19 '13 at 11:33

16

The problem is that width=100% would give photo-caption exact width of article-container; adding margins (or padding) would not affect width calculation. You can do this yourself using the css calc() so the style become:

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

Note that you might want to check for calc() browser support here

answered Dec 19 '13 at 11:33

Ali

417
5
9

Thank youuuu! `width: calc(100% - 20px);` method works exactly as I needed! – Katarina Perović Mar 21 '20 at 10:59
This is a bad solution as it requires the value in the calc() to be dependent on the value of the margin, which creates complexity. – John Miller Jun 21 '23 at 18:01

score 3 · Answer 4 · answered Mar 29 '17 at 13:39

The problem is that you're setting your width to 100% which gives no room for margins. Instead adjust your width to a percentage less than 100% and then specify your margin as half the percentage of the remaining space.

For Example:

style="width:98%; margin-left: 1%;"

score 1 · Answer 5 · answered Nov 24 '15 at 06:48

1

For:

Simple answer : don't try to use margin-right . Use ' margin-left: xxxpx; ' - make the xxx large enough to push your div box (Div Style= box) right as far as needed. No need for a fiddle, can put it exactly where you want it.

answered Nov 24 '15 at 06:48

Will Morledge

11
1

3

A fiddle would be very helpful, especially with the question being more specific than this answer's hints. – dakab Nov 24 '15 at 07:05

score 1 · Answer 6 · answered Jun 13 '20 at 15:32

1

width: -webkit-fill-available;

answered Jun 13 '20 at 15:32

ynceonrudi

258
2
7

score 1 · Answer 7 · answered Mar 26 '12 at 18:20

1

Use either padding in conjunction with box-sizing, or nested block with margins inside your absolutely positioned one without margins.

answered Mar 26 '12 at 18:20

Marat Tanalin

13,927
1
36
52

score 1 · Answer 8 · answered Mar 26 '12 at 18:49

You don't need width:100% if you display block. That might solve all these little issues.

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }

score 0 · Answer 9 · answered Jul 19 '17 at 12:57

Margin is the distance from each side to the neighboring element OR the borders of document.

Margin right didn't means that it will push the element towards left.It means that it will generate space on right side.If next element will come it will come after mentioned margin-right.In your case width is 100%.No space is available for margin-right.

Confusion point: 1) visual effect is different where width is auto.Same margin is generated in right.But due to absence of width property.Width is free to change.

2) Same effect when element is floated right.

These 2 above mentioned points will made different image of margin-right in mind.

Margin-right broken on width 100%

9 Answers9