How can I extend the right border to the bottom of the container no matter how much content is inside?

HTML & CSS
1

URL: goo.gl/QHcxdZ

Hello!

At the very bottom of the front page is a 2-column footer widget area (the area has a white background and includes social icons and a mailing list sign up box). There is a vertical border between the two columns, but it only extends to the bottom of the entire area if there is enough content inside.

Is there a way to extend the border to the bottom even if there isn’t enough content?

2

If the content is not going to change much, you could maybe get away with swapping the border-right on the left box for a border-left on the right one, the right being the taller element.
Some other ways to make both elements fill the full height would be to make the two elements display: table-cell and the parent wrapper display: table. Or just make the parent display: flex.

3

Hi, susannelson.

You can delete the border-right on the flex-footer-1 and add a border-left on the flex-footer-2, like this:

Note that the added rule should appear after the previous rules.

.footer-widgets .flex-footer-1 {
/*    border-right: 1px solid #eaeaea; /* */
    padding-right: 20px;
    width: 50%;
}

Add this rule

.footer-widgets .flex-footer-2 {
    border-left: 1px solid #eaeaea;
    margin-left: 0;  /* Changed from  2.5641%; */
    padding-left: 2.5641%;
}

This assumes that the right flex-footer will always have more content than the left flex-footer. If this is not the case, then you should consider SamA74’s display:table/table-cell or flexbox solution.

4

I think your solution can cover that too.

As you suggested and; If the “flex-footer-1” keeps its border-right and the “flex-footer-2” overlap it with its border-left by a -1px margin, then either can have more content.

3 Likes
5

That should do it.
The existing margin-left will need to be replaced by padding-left to keep the same spacing.

6

Thank you for your input, everyone! I decided to try the suggestion you gave, Erik, and I think it will work.

So, I have this:

.footer-widgets .flex-footer-1 {
border-right: 1px solid #eaeaea;
padding-right: 20px;
width: 50%
}

.footer-widgets .flex-footer-2 {
border-left: 1px solid #eaeaea;
margin-left: -1px;
padding-left: 20px;
width: 46%;
}

I’d like to make it so either side can have more content. This is a theme that will be for sale and I don’t know how customers will use those areas.

Do you see any issues with the way I’ve done it?

7

fiex-footer-2 did not have a width assigned before. Why did you add one? Adding the 46% width takes 4% away from inside the right container. It’s noticable. Assign an outline around the right footer box and see for yourself.

.footer-widgets .flex-footer-2 {
    border-left: 1px solid #eaeaea;
    margin-left: -1px;
    outline: 1px solid magenta;  /* TEMPORARY outline for testing */
    padding-left: 20px;
    width: 46%;  /* comment out to see width become wider */
}
1 Like
8

I did that as part of a test and forgot to remove it. I’ve removed it now, but it seems like the border in the middle isn’t in the exact center of the screen. Do you notice it?

9

I’m looking now.

EDIT:

The boxes are floated left and they have the following width assigned (line 710):

.one-half, .three-sixths, .two-fourths {
    width: 48.7179%;
}

If that width is changed to 50%, then the boxes fill the width of the parent evently.

.footer-widgets .flex-footer-1 .one-half,
.footer-widgets .flex-footer-2 .one-half {
    width:50%;
}

Again, this is an override rule, so it should appear after all others.

10

One difference I noticed was that the original margin-left was 2.5###(some-long-decimal)% and the padding-left you replaced it with is 20px. Not sure if that’s it.

11

Thanks for your help, everyone!

ronpat, I set them both to 50% and everything looks great now. I had tried that yesterday and it wasn’t working, so not sure what I was doing wrong. Anyway, I love it. Thank you!

1 Like
12

Percentage widths can be tricky. The browser needs to calculate how many pixels it should give the width and that can result in rounding errors where the total 100% actually becomes 100% + one extra pixel. A fix can be to give one of the parts a 1px negative margin to soak up an eventual rounding error.

The code you have now includes that -1px margin, perhaps that is what makes it work today?

2 Likes
13

Perhaps. :blush:

Thanks again for your help!

14

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