CODEWITHSUNDEEP
htmlcsspositionmargin
Olly F
Olly F

Reputation: 2869

Margin-right broken on width 100%

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.

Upvotes: 35

Views: 71605

Answers (9)

user7324216
user7324216

Reputation: 

width: -webkit-fill-available;

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

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

Upvotes: 19

Parshant
Parshant

Reputation: 1

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.

Upvotes: 0

Colin
Colin

Reputation: 1846

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%;"

Upvotes: 4

Will Morledge
Will Morledge

Reputation: 11

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.

Upvotes: 1

Ali
Ali

Reputation: 417

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

Upvotes: 16

Wesley Terry
Wesley Terry

Reputation: 195

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
        }

Upvotes: 1

sandeep
sandeep

Reputation: 92843

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

Upvotes: 29

Marat Tanalin
Marat Tanalin

Reputation: 14123

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

Upvotes: 1

Related Questions