Can you position a fixed element in the viewport vertically, but in the parent element horizonally?

up vote
2
down vote

favorite

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

(Same code is at https://jsfiddle.net/bxkgL9zs/4/ if you prefer)

as you can see, the sticky footer element:

#footer {

    position: fixed;

    bottom: 0;

}

seems to be contained inside the container element:

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}

since it isn't stuck all the way to the left of the screen like you would expect.

My question is, how can I make the footer the full with of the container, but still fixed to the bottom of the screen, like it is now?

I would have thought right: auto would do it, since left: auto (what it is now) seems to put it correctly in the container on the left.

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

Just add left: 0 to #footer
– Yandy_Viera
Nov 21 at 14:14

Why did you rollback the edits to this question, @JakubMatczak?
– Daniel Beck
Nov 21 at 14:15

@DanielBeck you removed JSFiddle link, which is still the most helpful thing here despite of your native SO snippet. JSFiddle is far more better to play with the code.
– Jakub Matczak
Nov 21 at 14:16

1

@JakubMatczak As you presumably know, code belongs on the site, not on external sites, because link rot is a thing that exists. jsfiddle is not "better to play with the code", it's functionally identical to the internal snippet. I'm reverting your rollback (but will restore the jsfiddle link as an alternative.)
– Daniel Beck
Nov 21 at 14:18

left:0 and right:0 will do the need full else if you want equal widh as the container then change the left: 30vw and right:30vw.
– vssadineni
Nov 21 at 14:18

|
show 1 more comment

up vote
2
down vote

favorite

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

(Same code is at https://jsfiddle.net/bxkgL9zs/4/ if you prefer)

as you can see, the sticky footer element:

#footer {

    position: fixed;

    bottom: 0;

}

seems to be contained inside the container element:

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}

since it isn't stuck all the way to the left of the screen like you would expect.

My question is, how can I make the footer the full with of the container, but still fixed to the bottom of the screen, like it is now?

I would have thought right: auto would do it, since left: auto (what it is now) seems to put it correctly in the container on the left.

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

Just add left: 0 to #footer
– Yandy_Viera
Nov 21 at 14:14

Why did you rollback the edits to this question, @JakubMatczak?
– Daniel Beck
Nov 21 at 14:15

@DanielBeck you removed JSFiddle link, which is still the most helpful thing here despite of your native SO snippet. JSFiddle is far more better to play with the code.
– Jakub Matczak
Nov 21 at 14:16

1

@JakubMatczak As you presumably know, code belongs on the site, not on external sites, because link rot is a thing that exists. jsfiddle is not "better to play with the code", it's functionally identical to the internal snippet. I'm reverting your rollback (but will restore the jsfiddle link as an alternative.)
– Daniel Beck
Nov 21 at 14:18

left:0 and right:0 will do the need full else if you want equal widh as the container then change the left: 30vw and right:30vw.
– vssadineni
Nov 21 at 14:18

|
show 1 more comment

up vote
2
down vote

favorite

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

(Same code is at https://jsfiddle.net/bxkgL9zs/4/ if you prefer)

as you can see, the sticky footer element:

#footer {

    position: fixed;

    bottom: 0;

}

seems to be contained inside the container element:

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}

since it isn't stuck all the way to the left of the screen like you would expect.

My question is, how can I make the footer the full with of the container, but still fixed to the bottom of the screen, like it is now?

I would have thought right: auto would do it, since left: auto (what it is now) seems to put it correctly in the container on the left.

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

(Same code is at https://jsfiddle.net/bxkgL9zs/4/ if you prefer)

as you can see, the sticky footer element:

#footer {

    position: fixed;

    bottom: 0;

}

seems to be contained inside the container element:

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}

since it isn't stuck all the way to the left of the screen like you would expect.

My question is, how can I make the footer the full with of the container, but still fixed to the bottom of the screen, like it is now?

I would have thought right: auto would do it, since left: auto (what it is now) seems to put it correctly in the container on the left.

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

html css css-position

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

edited Nov 21 at 14:41

TylerH

15.3k105067

edited Nov 21 at 14:41

TylerH

15.3k105067

edited Nov 21 at 14:41

TylerH

15.3k105067

asked Nov 21 at 14:08

user3493851

132

asked Nov 21 at 14:08

user3493851

132

asked Nov 21 at 14:08

user3493851

132

Just add left: 0 to #footer
– Yandy_Viera
Nov 21 at 14:14

Why did you rollback the edits to this question, @JakubMatczak?
– Daniel Beck
Nov 21 at 14:15

@DanielBeck you removed JSFiddle link, which is still the most helpful thing here despite of your native SO snippet. JSFiddle is far more better to play with the code.
– Jakub Matczak
Nov 21 at 14:16

1

@JakubMatczak As you presumably know, code belongs on the site, not on external sites, because link rot is a thing that exists. jsfiddle is not "better to play with the code", it's functionally identical to the internal snippet. I'm reverting your rollback (but will restore the jsfiddle link as an alternative.)
– Daniel Beck
Nov 21 at 14:18

left:0 and right:0 will do the need full else if you want equal widh as the container then change the left: 30vw and right:30vw.
– vssadineni
Nov 21 at 14:18

|
show 1 more comment

Just add left: 0 to #footer
– Yandy_Viera
Nov 21 at 14:14

Why did you rollback the edits to this question, @JakubMatczak?
– Daniel Beck
Nov 21 at 14:15

@DanielBeck you removed JSFiddle link, which is still the most helpful thing here despite of your native SO snippet. JSFiddle is far more better to play with the code.
– Jakub Matczak
Nov 21 at 14:16

1

@JakubMatczak As you presumably know, code belongs on the site, not on external sites, because link rot is a thing that exists. jsfiddle is not "better to play with the code", it's functionally identical to the internal snippet. I'm reverting your rollback (but will restore the jsfiddle link as an alternative.)
– Daniel Beck
Nov 21 at 14:18

left:0 and right:0 will do the need full else if you want equal widh as the container then change the left: 30vw and right:30vw.
– vssadineni
Nov 21 at 14:18

Just add left: 0 to #footer
– Yandy_Viera
Nov 21 at 14:14

Why did you rollback the edits to this question, @JakubMatczak?
– Daniel Beck
Nov 21 at 14:15

@DanielBeck you removed JSFiddle link, which is still the most helpful thing here despite of your native SO snippet. JSFiddle is far more better to play with the code.
– Jakub Matczak
Nov 21 at 14:16

@JakubMatczak As you presumably know, code belongs on the site, not on external sites, because link rot is a thing that exists. jsfiddle is not "better to play with the code", it's functionally identical to the internal snippet. I'm reverting your rollback (but will restore the jsfiddle link as an alternative.)
– Daniel Beck
Nov 21 at 14:18

left:0 and right:0 will do the need full else if you want equal widh as the container then change the left: 30vw and right:30vw.
– vssadineni
Nov 21 at 14:18

|
show 1 more comment

3 Answers
3

active

oldest

votes

up vote
1
down vote

accepted

When you set position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left.
This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

So that is why your #footer is being aligned at the bottom but not at the full left because the left position is by default relative to the container block in your case container

If you want the footer go to full left just add

#footer {

  position: fixed;

  bottom: 0;

  left: 0;      //add this

}

If you want the #footer in the actual position but filling the entire container space just add

#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;    //add the same width of the container

}

To have better understanding of the positioning read this https://developer.mozilla.org/es/docs/Web/CSS/position

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

add a comment |

up vote
0
down vote

Add width: 40vw; to your footer, simple as that...

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

1

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

add a comment |

up vote
0
down vote

Use the same width as the container and make the p inside it to be inline-block so you can easily center it:

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

answered Nov 21 at 14:37

Temani Afif

61.6k93572

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413897%2fcan-you-position-a-fixed-element-in-the-viewport-vertically-but-in-the-parent-e%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
1
down vote

accepted

When you set position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left.
This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

So that is why your #footer is being aligned at the bottom but not at the full left because the left position is by default relative to the container block in your case container

If you want the footer go to full left just add

#footer {

  position: fixed;

  bottom: 0;

  left: 0;      //add this

}

If you want the #footer in the actual position but filling the entire container space just add

#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;    //add the same width of the container

}

To have better understanding of the positioning read this https://developer.mozilla.org/es/docs/Web/CSS/position

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

add a comment |

up vote
1
down vote

accepted

When you set position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left.
This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

So that is why your #footer is being aligned at the bottom but not at the full left because the left position is by default relative to the container block in your case container

If you want the footer go to full left just add

#footer {

  position: fixed;

  bottom: 0;

  left: 0;      //add this

}

If you want the #footer in the actual position but filling the entire container space just add

#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;    //add the same width of the container

}

To have better understanding of the positioning read this https://developer.mozilla.org/es/docs/Web/CSS/position

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

add a comment |

up vote
1
down vote

accepted

When you set position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left.
This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

So that is why your #footer is being aligned at the bottom but not at the full left because the left position is by default relative to the container block in your case container

If you want the footer go to full left just add

#footer {

  position: fixed;

  bottom: 0;

  left: 0;      //add this

}

If you want the #footer in the actual position but filling the entire container space just add

#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;    //add the same width of the container

}

To have better understanding of the positioning read this https://developer.mozilla.org/es/docs/Web/CSS/position

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

When you set position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left.
This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

So that is why your #footer is being aligned at the bottom but not at the full left because the left position is by default relative to the container block in your case container

If you want the footer go to full left just add

#footer {

  position: fixed;

  bottom: 0;

  left: 0;      //add this

}

If you want the #footer in the actual position but filling the entire container space just add

#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;    //add the same width of the container

}

To have better understanding of the positioning read this https://developer.mozilla.org/es/docs/Web/CSS/position

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

answered Nov 21 at 14:32

Yandy_Viera

3,43531236

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

add a comment |

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

great! width: 40vw; fixes is. I was about to say though, that sometimes I don't actually know the width of the container. but width: inherit seems to work thank you
– user3493851
Nov 21 at 14:39

@user3493851 I'm glad to help you, remember if you want to align the content inside the footer just add text-align: center; to #footer
– Yandy_Viera
Nov 21 at 14:41

add a comment |

up vote
0
down vote

Add width: 40vw; to your footer, simple as that...

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

1

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

add a comment |

up vote
0
down vote

Add width: 40vw; to your footer, simple as that...

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

1

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

add a comment |

up vote
0
down vote

Add width: 40vw; to your footer, simple as that...

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

Add width: 40vw; to your footer, simple as that...

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

edited Nov 21 at 14:28

answered Nov 21 at 14:14

Itay Gal

6,27352358

answered Nov 21 at 14:14

Itay Gal

6,27352358

answered Nov 21 at 14:14

Itay Gal

6,27352358

1

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

add a comment |

1

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

this doesn't make the footer the full width of the container
– Pete
Nov 21 at 14:24

now it's full width of screen - not container
– Pete
Nov 21 at 14:25

It's unclear what you are asking. Can you clarify what is your end result?
– Itay Gal
Nov 21 at 14:28

Edited my answer, is that what you're looking for?
– Itay Gal
Nov 21 at 14:29

width: 40vw; is what I needed yes, but sometimes I don't know the width of the container though, so I'm trying width: inherit seems to be the same so far thank you
– user3493851
Nov 21 at 14:42

add a comment |

up vote
0
down vote

Use the same width as the container and make the p inside it to be inline-block so you can easily center it:

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

answered Nov 21 at 14:37

Temani Afif

61.6k93572

add a comment |

up vote
0
down vote

Use the same width as the container and make the p inside it to be inline-block so you can easily center it:

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

answered Nov 21 at 14:37

Temani Afif

61.6k93572

add a comment |

up vote
0
down vote

Use the same width as the container and make the p inside it to be inline-block so you can easily center it:

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

answered Nov 21 at 14:37

Temani Afif

61.6k93572

Use the same width as the container and make the p inside it to be inline-block so you can easily center it:

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

/* position */

.container {

    width: 40vw;

    margin: 0 auto;

    position: relative;

}



#footer {

  position: fixed;

  bottom: 0;

  text-align:center;

    width: 40vw;

}



/* style */

p {

  padding: 10px;

  margin: 10px;

}



#body p {

  background-color: #eee;

}



#footer p {

  background-color: #303030;

  color: white;

  display:inline-block;

}

<div class="container">

  <div id="body">

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

    <p>this is content</p>

  </div>

  <div id="footer">

    <p>this is the footer content</p>

  </div>

</div>

answered Nov 21 at 14:37

Temani Afif

61.6k93572

answered Nov 21 at 14:37

Temani Afif

61.6k93572

answered Nov 21 at 14:37

Temani Afif

61.6k93572

answered Nov 21 at 14:37

Temani Afif

61.6k93572

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut