How to create this layout? Child wider than parent / padding / flexbox?
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
html css flexbox
asked Nov 23 '18 at 11:01
user2991837user2991837
699
add a comment |
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
html css flexbox
asked Nov 23 '18 at 11:01
user2991837user2991837
699
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16
add a comment |
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
html css flexbox
asked Nov 23 '18 at 11:01
user2991837user2991837
699
I'm sure this is simple but I'm struggling to get my head around it.
I have two divs. A heading div max-width 500px. A main div max-width 400px. The main div should be centered horizontally in the browser window. The left hand edge of the heading div needs to align to the left hand edge of the main div. See below. The red line is the center of the browser window:
I've acheived this by adding a wrapper div with max-width 500px (the pink colour) and using extra padding on the left hand side. This works to a point. But at smaller screen sizes the extra padding on the left knocks the layout off center.
So how do I create this layout? I'm presuming I can not add the heading div as a child of the main div, because a child can't be wider than its parent. I'm guess flexbox might be the answer, but I've never used Flexbox.
This is the code I have so far:
https://jsfiddle.net/aqpyzogc/
<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>
.wrapper {
max-width:500px;
margin:0 auto;
padding:0 0 0 100px;
background-color:lightpink;
}
.heading {
max-width:500px;
background-color:cyan;
height:100px;
}
main {
max-width:400px;
background-color:grey;
height:500px;
}
html css flexbox
html css flexbox
asked Nov 23 '18 at 11:01
user2991837user2991837
699
asked Nov 23 '18 at 11:01
user2991837user2991837
699
asked Nov 23 '18 at 11:01
user2991837user2991837
699
asked Nov 23 '18 at 11:01
user2991837user2991837
699
asked Nov 23 '18 at 11:01
user2991837user2991837
699
699
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16
add a comment |
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16
add a comment |
1 Answer
1
active
oldest
votes
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
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%2f53445439%2fhow-to-create-this-layout-child-wider-than-parent-padding-flexbox%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
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
add a comment |
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
add a comment |
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
But at smaller screen sizes the extra padding on the left knocks the layout off center.
You can calculate the correct amount of padding for those viewport sizes, using the calc() function.
Below 600px viewport width, the remaining space is 100% minus 400px, and we need half of that for the padding-left, so:
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>I set the body margins to 0 here as well, so that the whole thing fits with the 600px breakpoint. If you need those additional margins, you have to figure them in in the breakpoint value calculation.
Fiddle: https://jsfiddle.net/aqpyzogc/1/
body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>body {
margin: 0;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 0 0 0 100px;
background-color: lightpink;
}
@media (max-width: 600px) {
.wrapper {
padding-left: calc((100% - 400px) / 2);
}
}
.heading {
max-width: 500px;
background-color: cyan;
height: 100px;
}
main {
max-width: 400px;
background-color: grey;
height: 500px;
}<div class="wrapper">
<div class="heading"></div>
<main></main>
</div>answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
answered Nov 23 '18 at 11:24
misorudemisorude
1,5502312
1,5502312
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
add a comment |
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
Thank you so much. That has been a brilliant solution
– user2991837
Nov 23 '18 at 12:33
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%2f53445439%2fhow-to-create-this-layout-child-wider-than-parent-padding-flexbox%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
@misorude if a child element has max-width greater than the parent element, it doesn't work. Only 'width' seems to work. And I don't want a fixed width.
– user2991837
Nov 23 '18 at 11:16