How to align the header and footer for a page
1. I have page with two sections divided in b.w ,
if I want the header on the left to have the background-color of black (same as section 1 bg) and header on the right to have the background-color of grey (same as section 2)
Need to achieve something like this - 2nd image
they should share the common header yet the section 1 side header content should be of background color of black (similiar to section1 bg color) and section2 side if there is any header content should be of background color that is similiar to sec2
Something like this to be achieved
24 Replies
How can I achieve this.
if youre putting the header inside the section, just set your bg color on the section and the header will have the same;
No, I will have common header for every page, not putting in section, Because every page had a same header and header contain left side content and right side content.
it sounds like you have a good idea of how the code is set out.
maybe you could give us something to work from like a codepen and then we can help
Ok
https://codepen.io/Lohitha-Yalavarthi/pen/QWodBNx this is the link
left side content of the header had to be black color and right side header content had to be red color.
where is the alternative header?
you have 1 header
is there supposed to be a 2nd header above
.section2 ?
š² the div soup is real
ah, just realised what you wanted.
are you able to update the html?Yes, I think so
No just one header for alll the pages that is common
The only way I approched this is having to create 2 headers, left side header content and right side header content and then add the leftsideheader (3 and title) to sect1 and rightsideheader (Button) to sect2 , but I am looking for a solution where I dont have to divide and create 2 sections headers. But create a common header
something like this or should it be laid out differently?
https://codepen.io/CA-Carl/pen/ExMZpwa
Sections divisions is good but the header text and button both should be based on section colors.
is the word Summary supposed to be a button that someone clicks for more info?
From the above image what I was conveying was the <h1>Header Text</h1> should the background d of background: #aba; until the next section started and next section where it is starting the button had to have background background: #333;
Yes its a button.
are you wanting the header to change to the background color of the section that is underneath it? im not understanding where two headers come in.
oh sorry Carl i see ya there now, sounds like youre grasping what OP is wanting. Now im curious, can you translate?
are you wanting the header to change to the background color of the section that is underneath it? yes exactly
easy enough
1 row containing 2 columns
each column contains a header div that contains either a
button or a heading element
then the content is below it (presumably wrapper by another div
this would be the ideal layout for his html as far as I can see, which is why I was checking if he was able to modify it
can either do this with grid or flex on that .container--wrapper
The container__header will just inherit the background-color of the column
imo if the content is related, it all belongs in 1 section
if it isnt then he could split it into 2 separate sections but thats a @angelL decisiongot it thanks, thats what I actually did. dividing the headers. But I wanted to add common header with out diving the header. But I think eventually its the only way to do it
you can lay it out with one heading element
and push the heading and button apart easily enough
the backgrounds will then need to be pseudo elements that are 50% of the width of the container
:before and :after will sit behind the container providing that different background effectok. Is it possible to do it in codepen?
I havent gotten clear idea, on what you are suggesting.
have updated that codepen slightly
https://codepen.io/CA-Carl/pen/ExMZpwa
I wouldnt recommend this approach though
at smaller screens you will need to realign EVERYTHING with css to make sure that the backgrounds sit flush where they are expected
I was checking before if the words summary was for a button because you could easily just use position absolute to put that somewhere on the container
this would prevent any need for you to do this sort of thing
just put some padding at the top of each column
and position absolute the header and the button at the top if needed
alternatively, go for the safe and easilky maintained route and have proper html with each section having its own header
this allows it to sit on toop of each other at smaller screens
Yes summary it was a button.
Thanks.
np. your original approach that you were trying not to do probably was the best solution but these are the first couple of solutions that jumped into my head and were easy enough to reproduce
Yeah, I only had one sol in my mind originally because I dont know another ways to do this, but after now observing diff solution, coming to a conclusion of which would be better is a sigh of relief that, I am approaching right way.