I would appreciate some insight into what I'm doing wrong

Hello,

I am currently attempting to code a simple header / content / footer layout as part of a homework assignment. I have the vast majority of the styling done, but I’m having issues properly aligning some elements.

Specifically, I need the sidebar (connect with me) to move from right to left until it’s 40px away from the main-content div, and also have the nav elements above the sidebar align with it to the left., and I need to get my sticky footer to stay at the bottom.

Please take a look on my github:

https://siriusscaper.github.io/

or

Any insight anyone can provide would be much appreciated. I can’t use bootstrap, flexbox, or css grid (unfortunately). The requirements are to do this strictly with box model using floats, clears, boxsizing, etc. I think I got so used to relying on flexbox and more recently css grid that I am having a lot of issues remembering or finding a solution to these problems without messing up my layout. I started with fairly organized style sheets, but it’s rather messy as I continued to try things to see if they would work.

Thanks

What do you want the sidebar to do once it get closer than 40px away from the main-content div? Also, I am having trouble visualizing what you mean by " have the nav elements above the sidebar align with it to the left." Do you have a drawing of how you want everything to look when the screen width forces the sidebar within the 40px constraint you have been given?

Sure, this is the recommended layout.

Is this page supposed to be responsive? What should things look like when the screen width is 800px wide? What should happen with Sidebar?

No, it doesn’t need to be. I was going to mess with that, but honestly I don’t want to bother considering what the assignment is. I’m already doing an alternate layout with css grid for extra practice with it.

If you only care about desktop layout, then you only need to replace your existing side-bar class with:

.side-bar {
    float: right;
    width: 270px;
    border: 1px solid #BDBDBD;
    box-shadow: 1px 1px 2px grey;
    text-align: center;
}

and define a container class as:

.container {
  width:960px;
  margin: 0 auto;
}

Ok, so this doesn’t solve the problem. But I finally realized that I put the side-bar outside of the container I had intended it to be in…wow. So I just need to solve the nav elements and the footer issue.

Thanks for the help so far.

Here is a screen shot of your solution after making the changes I mentioned.

Yeah, I tried it out. That’s not what I’m going for. The screenshot I shared shows that the header and footer span the entire length of the window. Also the footer needs to stick to the bottom of the page. I did figure out that moving the .side-bar div to within the .main-section div did the trick to move it next to the main-content.