Need help resizing section to fit content

Hey guys I’m working on the very last section of my website. The section was way to tall relative to the content inside of it. The only thing i could think of was adding a fixed height but this just reveals unwanted white space at the bottom.

p.s This is the second time I’ve made this site. I had to restart because I used position: absolute to position everything which created a similar problem with a lot more white space. Also while I was making the previous sections I ran into the same problem but I just used a negative margin-top: value to pull the section below it up higher to fill in the unwanted space, I can’t do that hear because its the last section to my website.

Hi sethrpabst, it sounds like you need to find another strategy then. :slight_smile:

Could you post what you have so far, both html and css, or maybe a link to the site.

My bad, thought I put it up.

1 Like


If you refer to your previous thread you will see that I pointed out the biggest error in your code.

You have made the same mistake again :slight_smile:

You simply cannot use relative positioning in that manner. It is not meant for that at all. The biggest problem is that you don’t seem to know how align blocks horizontally so instead you move them left and drag them up with relative positioning. This is not a workable method.

CSS has many ways of aligning blocks of content horizontally and flexbox is the easiest (previously you could have used the display:table properties or even floats). I would suggest that you take some time to learn a little flexbox and learn how to align blocks of content horizontally.

You seem to be applying widths and heights again to things that don’t need them so please read the comments in the other thread.

When I look at your page on my 1920px monitor I just see a jumble of overlapping elements. Nothing seems to fit or match up. There is no structure in your html with disparate elements just flung about willy nilly and then pushed into awkward positions.

I have no idea what those coloured triangles are doing as they are all over the place. I’m guessing you designed everything to fit your small monitor but you are the only one who has that monitor :slight_smile:

I also see you have disabled the horizontal x-scrollbar on the viewport to hide the fact that your design has created a massive horizontal scroll. In turn this has created 2 vertical scrollbars. This is again unworkable and bad practice. The problem is solely because you have used relative positioning to move hundred percent width elements some distance to the left making them poke miles out of the viewport. This is another reason why you should avoid relative positioning in that manner.

Usually I would offer some code to help but without a complete re-write again there’s little I can do to fix this. I think it perhaps better if we start again from scratch and we help you at each step rather than you presenting a ‘fait accompli’.

Do you have a design mockup of the look you are going for so we can see how it is supposed to look? This is what I see on my computer:

At smaller widths the 2 columns all overlap from the other sections.

Start simply and leave the bells and whistles to later. Get the structure right using semantic html elements. I can’t work out what those diamond shape elements are supposed to look like and adding each one as a div that is relatively placed is an absolute nightmare. If they are just meant to be borders then maybe a repeating background (or border-image) would suffice. I couldn’t see any logic to them.

Why are there lines going through the headings?

Lastly on mobile it is a complete disaster although I guess you haven’t thought about that yet but it needs to be built into the design process from the beginning.

I suggest we start again from the top and begin with the first blue section and the about us section only and code those properly. I’m assuming the whole page blue background is going to be a nice image of sorts as it looks very odd as just a blue background? (unless that’s some arty design concept you wanted to implement of course.)

Sorry to sound so negative but I’m just listing things that need to be addressed As I said before these are all common beginner mistakes and nothing we all haven’t done at some time. However there has to be a learning curve and correct approaches need to be taken in order to get the results you want.


Jeez when will I learn, smh. Thank you for the detailed explanation. I really appreciate you taking the time to explain it to me. If it isn’t already apparent, I’m a slow learner. I don’t easily pick things up and have to fail repeatedly before I come full circle. I should’ve gone to school instead of trying to teach myself cause I’ve been at this for 2+ years and this is where I am:( I’ll keep trying, thanks again and count on me posting some more questions. Much Love


That’s the main thing :slight_smile:

Maybe give a shout on the forums before you get too far with your revisions so we can check. It’s like building a house the foundations have to be solid :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.