How can I get a figure and image into a sub-wrapper?

1

For reference: https://codepen.io/alexeix/pen/EZaQOM

I’m building a personal portfolio, and using two wrappers: [div id=“all” ] for the gray portion for the ‘whole’ page, and [div id=“white-page”] for the written content.

I’m trying to put images into one of the “white-page” divs, but when I do it the image spills out of the designated div, and runs into the bootstrap element below.

Something is clearly overriding the div, but I don’t know what or why. Ordinary text isn’t doing that, everything else seems to be functional.

Can anyone point out what’s going on?

Thanks!

2

The problem is that you’re floating the image, which means its parent element no longer uses the image’s dimensions to calculate its own. This causes the element to collapse. Because this is such a common problem, there’s a long-standing hack to force such containing elements to recognize the floated elements’ dimensions. It’s called clearfix, and while there’s several different ways to accomplish this, Bootstrap should already have a clearfix class to use. However, the best way to do what you’re trying to accomplish is to not position the element yourself, but to use Bootstrap’s grid system instead.

3

Thanks for the reply. I’m trying to use clearfix, but nothing is happening. I’ve tried putting this code:

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

into both the CSS and html fields as well as JS field to target the parent div, and there is no change, except for an error in the JS field.

Is there a way to use mixins that I’m not understanding?

Thank you.

4

Why are you using a mixin for this?

Also, I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

5

Thanks.

The bootstrap website lists the mixin method as the preferred way of going around the float issue. Problem is, I’ve not worked with any of it before, so I can’t figure out what goes where.

Is there a way to use the clearfix class without a mixin?

6

I see. The mixin is already written for you as part of Bootstrap. What it’s saying is that, if you use Sass, you can apply the clearfix code to any other class you’ve written. Mixins let you mix code into other code (hence the name), but don’t do anything by themselves. Also, the documentation you linked to is for Bootstrap v4, and you’re using v3. Since you’re not using v4 or Sass (and should not, yet), we’ll stick with the standard CSS class, .clearfix, which Bootstrap v3 has already included for you.

The caveat here is that I have no idea how clearfix is implemented in Bootstrap v3, and I’m too lazy to check right now. You could easily copy the code from the link I provided earlier, and use that class as your clearfix. You would apply it to the floated element’s parent. All that said, the best way to set the layout of your page is to use Bootstrap’s grid system.

7

OK, thanks a lot- it worked!

Yeah, I agree that going forward using bootstrap’s grid system is likely the best thing to do. Still, learning these side-lines is useful, and when I rebuild the site once I get all my Python scripts together, I’ll do it from the ground-up, and try to use grids in the process.

1 Like