My goal is to build a straightforward webpage template with 3 distinct sections: a header with two columns, a main body, and a footer. Here's the layout I've been working on:
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
The issue I'm facing currently revolves around the header section, specifically the two columns within it. The first column features an image while the second contains buttons. I'd like the header to span 100% of the screen width, with the contents of the first and second columns aligning left and right respectively, leaving space in between them. I've tried using CSS properties like float, align, and position, but haven't found a solution yet.
If anyone has advice on achieving this layout, I'd greatly appreciate it.
Another area I need assistance with is the footer. I'm unsure how to approach building it effectively. Ideally, I'd like the footer to stretch across the bottom of the screen if there's white space between the footer and the horizontal axis of the browser. Currently, the height of my body only extends to the content within it. Any general tips on utilizing CSS to make the page fit the entire screen would be helpful.