How can I align divs correctly to fit page width without overflow?How to Vertical align elements in a div?How can I position my div at the bottom of its container?How to align content of a div to the bottomHow do I modify the URL without reloading the page?How to align a <div> to the middle (horizontally/width) of the pageHow to align 3 divs (left/center/right) inside another div?How do I vertically align text in a div?How do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divCannot display HTML string
Why is the Vasa Museum in Stockholm so Popular?
What is the reason behind water not falling from a bucket at the top of loop?
What is it exactly about flying a Flyboard across the English channel that made Zapata's thighs burn?
Which honorific is correct, oshumi or goshumi?
Has J.J.Jameson ever found out that Peter Parker is Spider-Man?
Why does BezierFunction not follow BezierCurve at npts>4?
Are the "muddled thoughts" from Synaptic Static a magical effect?
Partial Fractions: Why does this shortcut method work?
Is an "are" omitted in this sentence
Feedback diagram
Is the first page of Novel really that important?
How can I perform a deterministic physics simulation?
Accurately recalling the key - can everyone do it?
A verb for when some rights are not violated?
How were x-ray diffraction patterns deciphered before computers?
What is Modern Vipassana?
HackerRank Implement Queue using two stacks Solution
Approximating an expression for a potential
Can an unintentional murderer leave Ir Miklat for Shalosh Regalim?
Why does Shift-right says it is bound to right?
Is Norway in the Single Market?
Representation of the concatenation at the type level
How long should I wait to plug in my refrigerator after unplugging it?
Why isn't the new LEGO CV joint available on Bricklink or Brickowl?
How can I align divs correctly to fit page width without overflow?
How to Vertical align elements in a div?How can I position my div at the bottom of its container?How to align content of a div to the bottomHow do I modify the URL without reloading the page?How to align a <div> to the middle (horizontally/width) of the pageHow to align 3 divs (left/center/right) inside another div?How do I vertically align text in a div?How do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a divCannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong.
I have put a div at the top for 100% so you can compare where the divs end.
Is there a way to align the divs to fit the page?
I thought that simply adding some % width statements I could easily fill the page however since I'm using margins for the divs it doesn't add up. See codepen here and snippet below:
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>html css css3 flexbox alignment
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
add a comment |
Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong.
I have put a div at the top for 100% so you can compare where the divs end.
Is there a way to align the divs to fit the page?
I thought that simply adding some % width statements I could easily fill the page however since I'm using margins for the divs it doesn't add up. See codepen here and snippet below:
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>html css css3 flexbox alignment
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
add a comment |
Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong.
I have put a div at the top for 100% so you can compare where the divs end.
Is there a way to align the divs to fit the page?
I thought that simply adding some % width statements I could easily fill the page however since I'm using margins for the divs it doesn't add up. See codepen here and snippet below:
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>html css css3 flexbox alignment
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
Okay so I am playing around with flex box, I have created this simple layout of divs but I am evidently formatting them wrong.
I have put a div at the top for 100% so you can compare where the divs end.
Is there a way to align the divs to fit the page?
I thought that simply adding some % width statements I could easily fill the page however since I'm using margins for the divs it doesn't add up. See codepen here and snippet below:
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
width: 29%;
.bottomRight
width: 100%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>html css css3 flexbox alignment
html css css3 flexbox alignment
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
edited Mar 27 at 1:11
kukkuz
34.1k7 gold badges29 silver badges72 bronze badges
34.1k7 gold badges29 silver badges72 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
asked Mar 26 at 17:58
ShayrapetShayrapet
154 bronze badges
154 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
When using a wrapping flexbox all factors that contributes to the width of the flex items relative to the flexbox must be considered - so margins and borders must be taken into account:
- remove default
bodymargin - use
border-boxto includepaddingandborderinwidth - Use
width: calc(33.33% - 10px)for themyboxandwrapBottomRightelements
See demo below:
body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
add a comment |
So you will likely want to tweak the widths and heights of the different divs, but the layout you are after is quite easy with flexbox and justify-content: space-between;. In order to achieve this I needed to add one more wrapper .bottomContainer and remove the flex-wrap: wrap;. Check out the flex-direction: column: where you need boxes to flow vertically.
Everyone's favorite flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
add a comment |
Hope this helps!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>Happy Coding!
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
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%2f55363524%2fhow-can-i-align-divs-correctly-to-fit-page-width-without-overflow%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
When using a wrapping flexbox all factors that contributes to the width of the flex items relative to the flexbox must be considered - so margins and borders must be taken into account:
- remove default
bodymargin - use
border-boxto includepaddingandborderinwidth - Use
width: calc(33.33% - 10px)for themyboxandwrapBottomRightelements
See demo below:
body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
add a comment |
When using a wrapping flexbox all factors that contributes to the width of the flex items relative to the flexbox must be considered - so margins and borders must be taken into account:
- remove default
bodymargin - use
border-boxto includepaddingandborderinwidth - Use
width: calc(33.33% - 10px)for themyboxandwrapBottomRightelements
See demo below:
body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
add a comment |
When using a wrapping flexbox all factors that contributes to the width of the flex items relative to the flexbox must be considered - so margins and borders must be taken into account:
- remove default
bodymargin - use
border-boxto includepaddingandborderinwidth - Use
width: calc(33.33% - 10px)for themyboxandwrapBottomRightelements
See demo below:
body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
When using a wrapping flexbox all factors that contributes to the width of the flex items relative to the flexbox must be considered - so margins and borders must be taken into account:
- remove default
bodymargin - use
border-boxto includepaddingandborderinwidth - Use
width: calc(33.33% - 10px)for themyboxandwrapBottomRightelements
See demo below:
body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>body
margin: 0;
*
box-sizing: border-box;
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
width: calc(33.33% - 10px); /* added*/
border: 0.5px solid black;
margin: 5px;
padding: 10px;
.headerTitle
width: 100%;
.bottomLeft
/* width: 29%; */
.bottomRight
width: 100%;
.wrapBottomRight
width: calc(33.33% - 10px); /* added */
display: flex;
flex-direction: row;
flex-wrap: wrap;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
answered Mar 27 at 1:09
kukkuzkukkuz
34.1k7 gold badges29 silver badges72 bronze badges
34.1k7 gold badges29 silver badges72 bronze badges
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
add a comment |
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
1
1
Thank you for the help
– Shayrapet
Mar 27 at 13:26
Thank you for the help
– Shayrapet
Mar 27 at 13:26
add a comment |
So you will likely want to tweak the widths and heights of the different divs, but the layout you are after is quite easy with flexbox and justify-content: space-between;. In order to achieve this I needed to add one more wrapper .bottomContainer and remove the flex-wrap: wrap;. Check out the flex-direction: column: where you need boxes to flow vertically.
Everyone's favorite flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
add a comment |
So you will likely want to tweak the widths and heights of the different divs, but the layout you are after is quite easy with flexbox and justify-content: space-between;. In order to achieve this I needed to add one more wrapper .bottomContainer and remove the flex-wrap: wrap;. Check out the flex-direction: column: where you need boxes to flow vertically.
Everyone's favorite flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
add a comment |
So you will likely want to tweak the widths and heights of the different divs, but the layout you are after is quite easy with flexbox and justify-content: space-between;. In order to achieve this I needed to add one more wrapper .bottomContainer and remove the flex-wrap: wrap;. Check out the flex-direction: column: where you need boxes to flow vertically.
Everyone's favorite flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
So you will likely want to tweak the widths and heights of the different divs, but the layout you are after is quite easy with flexbox and justify-content: space-between;. In order to achieve this I needed to add one more wrapper .bottomContainer and remove the flex-wrap: wrap;. Check out the flex-direction: column: where you need boxes to flow vertically.
Everyone's favorite flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>*
box-sizing: border-box;
.container
display: flex;
flex-direction: column;
margin: 5px;
.bottomContainer
display: flex;
justify-content: space-between;
.myBox
border: 1px solid black;
padding: 10px;
.headerTitle
margin-bottom: 10px;
.bottomLeft
width: 30%;
.bottomRight
height: 48%;
.wrapBottomRight
width: 37%;
display: flex;
flex-direction: column;
justify-content: space-between;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="bottomContainer">
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="wrapBottomRight">
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>
</div>
</div>answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
answered Mar 27 at 4:19
BugsArePeopleTooBugsArePeopleToo
1,9671 gold badge9 silver badges12 bronze badges
1,9671 gold badge9 silver badges12 bronze badges
add a comment |
add a comment |
Hope this helps!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>Happy Coding!
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
add a comment |
Hope this helps!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>Happy Coding!
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
add a comment |
Hope this helps!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>Happy Coding!
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
Hope this helps!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>Happy Coding!
.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>.container
display: flex;
flex-direction: row;
flex-wrap: wrap;
.myBox
border: 0.5px solid black;
margin: 5px;
padding: 10px;
width: 50%
.headerTitle
width: 100%;
.bottomLeft
width: 20%;
.bottomRight
width: 20%;
.wrapBottomRight
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
<div class="container">
<div class="myBox headerTitle">
<h1> HELLO THERE </h1>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomLeft">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
<div class="myBox bottomRight">
<h2> Title </h2>
<p> Some shit </p>
</div>
</div>answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
answered Mar 26 at 18:25
JodastJodast
9551 gold badge9 silver badges26 bronze badges
9551 gold badge9 silver badges26 bronze badges
add a comment |
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%2f55363524%2fhow-can-i-align-divs-correctly-to-fit-page-width-without-overflow%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
