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
No description
No description
24 Replies
angell1389
angell1389ā€¢10mo ago
How can I achieve this.
clevermissfox
clevermissfoxā€¢10mo ago
if youre putting the header inside the section, just set your bg color on the section and the header will have the same;
angell1389
angell1389ā€¢10mo ago
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.
Coder_Carl
Coder_Carlā€¢10mo ago
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
angell1389
angell1389ā€¢10mo ago
Ok
angell1389
angell1389ā€¢10mo ago
left side content of the header had to be black color and right side header content had to be red color.
Coder_Carl
Coder_Carlā€¢10mo ago
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?
angell1389
angell1389ā€¢10mo ago
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
Coder_Carl
Coder_Carlā€¢10mo ago
something like this or should it be laid out differently? https://codepen.io/CA-Carl/pen/ExMZpwa
angell1389
angell1389ā€¢10mo ago
Sections divisions is good but the header text and button both should be based on section colors.
No description
Coder_Carl
Coder_Carlā€¢10mo ago
is the word Summary supposed to be a button that someone clicks for more info?
angell1389
angell1389ā€¢10mo ago
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.
clevermissfox
clevermissfoxā€¢10mo ago
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?
angell1389
angell1389ā€¢10mo ago
are you wanting the header to change to the background color of the section that is underneath it? yes exactly
Coder_Carl
Coder_Carlā€¢10mo ago
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
<body>
<section class="container-wrapper">
<div class="column">
<div class="container__header">
<h1>Header Text</h1>
</div>
<div class="section1">

</div>
</div>
<div class="column">
<div class="container__header">
<button>Button</button>
</div>
<div class="section2">

</div>
</div>
</section>
</body>
<body>
<section class="container-wrapper">
<div class="column">
<div class="container__header">
<h1>Header Text</h1>
</div>
<div class="section1">

</div>
</div>
<div class="column">
<div class="container__header">
<button>Button</button>
</div>
<div class="section2">

</div>
</div>
</section>
</body>
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 decision
angell1389
angell1389ā€¢10mo ago
got 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
Coder_Carl
Coder_Carlā€¢10mo ago
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 effect
angell1389
angell1389ā€¢10mo ago
ok. Is it possible to do it in codepen? I havent gotten clear idea, on what you are suggesting.
Coder_Carl
Coder_Carlā€¢10mo ago
have updated that codepen slightly https://codepen.io/CA-Carl/pen/ExMZpwa
Coder_Carl
Coder_Carlā€¢10mo ago
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
angell1389
angell1389ā€¢10mo ago
Yes summary it was a button. Thanks.
Coder_Carl
Coder_Carlā€¢10mo ago
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
angell1389
angell1389ā€¢10mo ago
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.
Want results from more Discord servers?
Add your server