#1
On this site you can find some gap above the footer. If I put margin-bottom: 0px; on .wrap the 50% gap created by the wrap margin disappears, but still there is a white gap, which I could not understand from where is that coming.
#2
One flex div has two sections:
one is set to 33%, max-width, and another one to
67%, but still is unable to take that full width and space is vacant there.
whats the fix?
Q #1
.wrap {
margin: 20px auto; /* delete me or change to "0 auto" if centering the container is needed */
max-width: 1400px;
}
.fcontent {
background: #f7f7f7 none repeat scroll 0 0;
margin: 10px 0; /* delete me */
padding: 10px;
}
do you need line numbers?
No! got it.
I ignored margin-bottom for this:
.fcontent I was just deleting margin-bottom for .wrap
Q#2. Where are the flex divs?
I’m not sure if you realize that your header has a max-width of 1600px, the “wrap” has a max-width of 1400px, and the footer has no max-width. AND the three sections are not within a common “outer” wrapper, which normally makes life easier.
Is this intentional?
No!
Hi @ronpat,
Do you think that setting a max-width for footer s going to solve the issue? If yes, please explain to me how?
let us discuss this part of additional clarity, and learning.
#Update:
for .footwo 
I tried setting margin: auto, and it got aligned in the center. I think that could be a one fix to the issue #2
No.
I am probably not going to be able to help you any further.
I start with the framing of a page and then add contents. You seem to have started without framing the page and want to band-aid the contents before fixing the framing.
Someone else will have to help you write bad code.
Can you please help me where am I going wrong?
The header and footer has a max-width of 1600px, but the rest of the body content has the max-width of 1400px?
Is that not a correct strategy?
The middle content is based on this layout created by Mr @PaulOB →
the inner pages are based on this layout →
so where is the frame breaking? what is wrong and at what stage that wrong actually went wrong?
And the footer is designed like this:
Why did you start another thread about the margin question instead of finishing the discussion here?
I have received an email 10 days back from an old member here that if the question is too generic and may help someone else in future than try posting that in an independent thread instead of messing up so many things in just one thread. I thought this could be the case now.
That was question #1 in this topic. It should be satisfied here. Coincidentally, it is also affected by the framing issue which needs to be addressed FIRST.
EDIT:
@James_Hibbard has left a response in your other thread. Please check it out and see if it addresses your first issue satisfactorily. Then return here.
Yes, but…
<body>
<header class="wrap">
<div class="wrap">
<footer class="footer">
</body>
If you will look at your test page, you will find that all of the sections are left aligned at wide widths. Normally a page is centered within the window. If you are choosing to be a minimalist, then you must also keep track of the widths and centering margin in each section. An easier method is to put an “outer” div around the entire page and assign the max-width of the page to the outer div. The children of that outer div usually do not require a width to be set as they will extend to the width of .outer. That will be true for the header and footer as designed. In your design, the content section which is a div with the class of “wrap” will still need the min-width:1400px and margin:0 auto;. All of the rows of content will go inside that container, which is more appropriately the <main> tag nowadays.
One does not usually need to give the <header> and <footer> classNames, unless necessary.
So for framing I would recommend:
<body>
<div class="outer">
<header></header>
<main>
... fcontent...
</main>
<footer></footer>
</div>
</body>
the “outer” div is useful to keep the max width under control and to minimize errors caused by padding and borders on child elements.
You seem to have restored your test site to its previous state. I believe @James_Hibbard gave you the best solution for handling the margins. My “help” was not so helpful.
You do need to delete the bottom margin from div class="wrap" which can be done by assigning {margin:20px auto 0}, and you need to delete the bottom margin from the last “fcontent” box. That can be done with :last-child {margin-bottom:0} as shown by Pullo.
About the footer: The flex box is coded incorrectly. I’ll have to look up the correct code, or someone else can give it to you faster.
I would agree when the site is tightly controlled and self-built but there is a danger that if you globally target header or footer (or indeed any tag) then you may run into issues with third party plugins (especially in wordpress) which may use header and footer elements (as html5 allows multiple headers and footers).
For this reason I find it best to use classes and decouple your css from the html as much as possible.
Remove the width and use flex-grow to make it take available width.
e.g.
.footwo {
/* width: 67%; */
margin: auto;
flex: 1 0 0%;
background: red;/* for testing*/
}
Hello there @PaulOB and @ronpat,
If I do this to the fooone:
I mean also setting max-width. Then are we still in the realms of flex or we have deviated and abused the flexbox concept?
Additionally,
This is one row and one column →
Which property of flex to use so that is there is a space it can accommodate more than one item in one row.
I am experimenting with the things so that I can learn more.
Yes you can set min and max-widths if you want. You have to be careful though that your layout works with these dimensions otherwise content may not fit or the whole thing becomes too big on smaller screens if you are not wrapping with flex. You can usually work this out for yourself and then apply media queries to change the design to fit.
You can set the flex item to be a flex container also and that will allow the columns to align side by side.
e.g.
.footer{align-items:flex-start;}
.fooone{
display:flex;
flex-wrap:wrap;
}
.fooone > div{margin-right:20px;}
Your henryford element is too wide with the margins so remove them and allow the image to resize.
e.g.
.henryford{margin:auto}
.henryford img{max-width:100%;height:auto;}
(The above code is all additions so merge into existing code)
That will allow the page to get much smaller before you need to add a media query and re-jig it again.
Can you please help me to understand this line?
Implemented!
Instead of this can we also use:
justify-content: space-between;
or that will not guarantee space between when the space is significantly low to be left vacant?
By default flex items do not wrap which means they stay all in one line even when too large for the container and thus a scrollbar appears on the viewport or they stick out of the element.
Space-between will arrange the space between the elements evenly but for 2 elements only it will push the elements to the edges of the container. If you add a background to each element you will see that each item is only as wide as its content. If however you have used flex-grow on one of the items then there will be no space between anyway.
The easiest way to test is to take a simple code and add/remove things and see what happens.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
display:flex;
justify-content:space-between;
}
.wrap > div {
background:red;
/*flex:1 0 0; uncomment this to see the difference*/
}
</style>
</head>
<body>
<div class="wrap">
<div>Flex Item</div>
<div>Flex Item</div>
</div>
</body>
</html>
See my flexbox patterns pen for more examples.
I often check your work on codepen.io; In fact, you keep on adding new things every week; At least I check your codepen 2 times a week.
Sir,
I tried everything that I know, but could not align this text in the horizontal center.
would it be possible to shift this pointer towards more left, but with these constraints →
Once the drop-down opens it will have the same width as this currently have?
Not quite sure what you are asking but the pointer is controlled by the right position so just change right:16px to something greater.
e.g.
.wrapper:after {
content: "";
width: 0;
height: 0;
position: absolute;
z-index: 3;
right: 20px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
transition: all 0.75s ease;
}
Make sure that topmenu has at least 20px right padding or it will sit on top of the icon because the icon is absolutely placed.
The text is centred because the last element (ccthemeplug) has a min-width of 4em (add a background colour to that last element to see that the element is centred).
That element needs a width because you are changing the text and without a width the line would jump when the text was change from themes to plugin. You can try shortening the min-width but you have to be careful you don;t crop the text as text size will vary in different browsers and also because the words are not the same length.
You have to be careful when adding effects that you don’t make the whole line judder or reflow as that can cause epileptic fits and is uncomfortable to view anyway.
Try 3em but you will never get it exact because one word is absolutely placed to avoid the page jump and needs a width to hold the space open.
.ccthemplug {
color: #26292c;
position: relative;
min-width: 3em;
overflow: hidden;
}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.