Mixing
Extend child div to one side
I'm trying to accomplish something with my website that I'm having a very hard time wording into a Google search. I have a container div sitting inside of a section element that expands across the entire width of the page. I want the container width to extend out to the left side, and the right side to never extend beyond a specific point.
Here's my existing code:
html
<section>
<div class="container">
</div>
</section>
css
section{
width: 100%;
margin: auto;
}
.container{
width: 1200px;
margin: 0 auto;
}
This results in the container div being centered in relation to the section element. As the width of the browser changes size, the container's left and right bounds stay the same.
Now I want to extend the left side of the container while the right side stays the same. How can I do that?
The key part of this is having the right side of the container stay where is it relative to the center of the section, so even if the width of the browser changes, that right side doesn't move.
The reason I'm doing this is so I can put a background image on container and have it expand to reach the left side of the page.
EDIT:
I also must be able to put elements inside the container and have them reach the right edge, so padding won't work.
html css
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
add a comment |
I'm trying to accomplish something with my website that I'm having a very hard time wording into a Google search. I have a container div sitting inside of a section element that expands across the entire width of the page. I want the container width to extend out to the left side, and the right side to never extend beyond a specific point.
Here's my existing code:
html
<section>
<div class="container">
</div>
</section>
css
section{
width: 100%;
margin: auto;
}
.container{
width: 1200px;
margin: 0 auto;
}
This results in the container div being centered in relation to the section element. As the width of the browser changes size, the container's left and right bounds stay the same.
Now I want to extend the left side of the container while the right side stays the same. How can I do that?
The key part of this is having the right side of the container stay where is it relative to the center of the section, so even if the width of the browser changes, that right side doesn't move.
The reason I'm doing this is so I can put a background image on container and have it expand to reach the left side of the page.
EDIT:
I also must be able to put elements inside the container and have them reach the right edge, so padding won't work.
html css
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
add a comment |
I'm trying to accomplish something with my website that I'm having a very hard time wording into a Google search. I have a container div sitting inside of a section element that expands across the entire width of the page. I want the container width to extend out to the left side, and the right side to never extend beyond a specific point.
Here's my existing code:
html
<section>
<div class="container">
</div>
</section>
css
section{
width: 100%;
margin: auto;
}
.container{
width: 1200px;
margin: 0 auto;
}
This results in the container div being centered in relation to the section element. As the width of the browser changes size, the container's left and right bounds stay the same.
Now I want to extend the left side of the container while the right side stays the same. How can I do that?
The key part of this is having the right side of the container stay where is it relative to the center of the section, so even if the width of the browser changes, that right side doesn't move.
The reason I'm doing this is so I can put a background image on container and have it expand to reach the left side of the page.
EDIT:
I also must be able to put elements inside the container and have them reach the right edge, so padding won't work.
html css
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
I'm trying to accomplish something with my website that I'm having a very hard time wording into a Google search. I have a container div sitting inside of a section element that expands across the entire width of the page. I want the container width to extend out to the left side, and the right side to never extend beyond a specific point.
Here's my existing code:
html
<section>
<div class="container">
</div>
</section>
css
section{
width: 100%;
margin: auto;
}
.container{
width: 1200px;
margin: 0 auto;
}
This results in the container div being centered in relation to the section element. As the width of the browser changes size, the container's left and right bounds stay the same.
Now I want to extend the left side of the container while the right side stays the same. How can I do that?
The key part of this is having the right side of the container stay where is it relative to the center of the section, so even if the width of the browser changes, that right side doesn't move.
The reason I'm doing this is so I can put a background image on container and have it expand to reach the left side of the page.
EDIT:
I also must be able to put elements inside the container and have them reach the right edge, so padding won't work.
html css
html css
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
edited Nov 19 '18 at 21:25
mrg95
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
asked Nov 19 '18 at 21:01
mrg95mrg95
67612052
67612052
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If I understood your problem correctly this might work:
.container{
width: 1200px;
padding-right: calc(50% - 600px);
}
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them withposition: absolute
– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container hasdisplay: flexsince I use flexbox for the elements in there.position: absoluteworks for the div going on the right, but the other flexbox elements seem to ignore it.
– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
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',
autoActivateHeartbeat: false,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382551%2fextend-child-div-to-one-side%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If I understood your problem correctly this might work:
.container{
width: 1200px;
padding-right: calc(50% - 600px);
}
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them withposition: absolute
– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container hasdisplay: flexsince I use flexbox for the elements in there.position: absoluteworks for the div going on the right, but the other flexbox elements seem to ignore it.
– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
add a comment |
If I understood your problem correctly this might work:
.container{
width: 1200px;
padding-right: calc(50% - 600px);
}
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them withposition: absolute
– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container hasdisplay: flexsince I use flexbox for the elements in there.position: absoluteworks for the div going on the right, but the other flexbox elements seem to ignore it.
– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
add a comment |
If I understood your problem correctly this might work:
.container{
width: 1200px;
padding-right: calc(50% - 600px);
}
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
If I understood your problem correctly this might work:
.container{
width: 1200px;
padding-right: calc(50% - 600px);
}
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
answered Nov 19 '18 at 21:10
Velimir TchatchevskyVelimir Tchatchevsky
2,12411118
2,12411118
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them withposition: absolute
– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container hasdisplay: flexsince I use flexbox for the elements in there.position: absoluteworks for the div going on the right, but the other flexbox elements seem to ignore it.
– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
add a comment |
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them withposition: absolute
– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container hasdisplay: flexsince I use flexbox for the elements in there.position: absoluteworks for the div going on the right, but the other flexbox elements seem to ignore it.
– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
1
1
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Thanks for this! It worked. When I tested it, I forgot to put a space on both sides of the - sign so it didnt work at first. I have never heard of calc before. Cheers :)
– mrg95
Nov 19 '18 at 21:14
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
Sorry, I made a mistake. I forgot to mention that I want to also put other elements inside the container div. the padding prevents any other elements from aligning to that right edge... :/
– mrg95
Nov 19 '18 at 21:24
You can position them with
position: absolute– Velimir Tchatchevsky
Nov 19 '18 at 21:27
You can position them with
position: absolute– Velimir Tchatchevsky
Nov 19 '18 at 21:27
The container has
display: flex since I use flexbox for the elements in there. position: absolute works for the div going on the right, but the other flexbox elements seem to ignore it.– mrg95
Nov 19 '18 at 21:34
The container has
display: flex since I use flexbox for the elements in there. position: absolute works for the div going on the right, but the other flexbox elements seem to ignore it.– mrg95
Nov 19 '18 at 21:34
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
Got it, just used another div to serve as the flexbox parent. Thanks for your time!
– mrg95
Nov 19 '18 at 21:38
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382551%2fextend-child-div-to-one-side%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
