Help with tribute page - positioning

Hello all,

So this is a super basic question I think, but I’m just starting out. Forgive the messy code, I’m sure I will get better!

Here is the link to my Codepen Tribute Page:

I’m pretty happy with my page except that I can’t get my sidebar hamburger to be the same length as the jumbotron element.

First, I tried making them both the same height with height: 100em for both elements. That worked great, except that the tables were not responsive and the elements would overlap each other when the page was shrunk.

I managed to solve this problem by making the jumbotron element height: 100% - awesome, now everything adjusts! Unfortunately, setting the big sidebar hamburger to height: 100% does not seem to accomplish this and I can’t find a way to make it align perfectly to the jumbotron’s size without the ‘hard’ set height that screws up the inner jumbotron content.

Maybe I’m being too pedantic and should just set them both to height: 100em and move on, accepting some occasional table squishiness depending on size? If that’s the answer, I’ll take it.

Any other feedback is welcome too. Thank you!

Setting the image and the td element to 100% height works but you need to reposition the footer text. Also the image gets stretched a lot.

Also, it’s better to use divs instead of tables for layouts.

I did try to do divs at first, but I couldn’t make anything line up and gave up. Tables make more sense to me (edit: meaning, I understand them better, not that I thought they were a better fit for this project.) I will try to force myself to use divs for the Portfolio project so I can better understand them. Thank you so much!

Replying to you again - I made the changes you suggested and it fixed everything! It even fixed the mystery about the footer (why was it being eaten by the jumbotron? i had to give it a negative margin to fudge it.) When I set both td’s to height: 100%, the footer mystery ended and I was able to remove the negative margin so it was naturally placed correctly. I really appreciate your help - I should have asked for help sooner. I fought with these hamburgers all day. >_>

Edit: So I don’t reply a third time (oops) it does not seem to be showing up correctly in Firefox or Edge, only Chrome. Hmmm
Edit 9000: I also set the overall table to height: 100% and that fixed it in the other browsers. Interesting!

Glad I was able to help!
I think I saw a ‘container-fluid’ class there, so you’re using bootstrap right? There is a class for rows and a group of classes for columns, you just add them to the div. The row class is ‘row’, the column classes are ‘col-xs-n’, ‘col-sm-n’, and there are more that I don’t recall because I don’t use those often. Replace the n with a number, this number can have a value between 1-12. I could explain the whole thing here but it’s better if you check it on their website. Look for ‘boostrap grid’.

Here is an example for 1 row, 3 columns. In this case for a small screen.

<div class="row">
<div class="col-sm-4" />
<div class="col-sm-4" />
<div class="col-sm-4" />

The sum of the numbers from the columns shouldn’t exceed 12. 12 is the max width.

Yea, I’m using firefox and some of the text is hidden by the main container.

Yes, I understand the basics of both Bootstrap columns and divs, but struggle with the finer points of trying to make everything fit and do what I want it to. I’m forcing myself to interact more with both for the Portfolio project, per your advice. And after the good experience this time, I’ll be less afraid to ask for advice next time I get stuck. Thanks again!