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

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

#1

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


#2

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?


#3

Sure, this is the recommended layout.


#4

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


#5

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.


#6

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;
}

#7

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.


#8

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


#9

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.