Grow your CSS skills. Land your dream job.

Make Inner Div Fit 100% Height of Outer Div?

  • # September 9, 2011 at 11:26 am

    On a theme I’m working on I want a div which expands to 100% height of the outer div (which I will put around the thumbnail). The purpose of this is to move text further to the right to be aligned as a block paragraph and not wrap around the thumbnail. I would use padding but I want the excerpt’s text to be aligned to the left when there isn’t an image. I have tried this a couple times to no avail. Suggestions?

    Take a look:
    http://themeforward.com/demo2/page/2/

    # September 9, 2011 at 12:15 pm

    I think you’re trying to get the best of both worlds and overworking the markup.

    My immediate thoughts are to float the image (whether inside a div or figure or not) but that seems a little obvious.

    EDIT: Here you go: http://jsfiddle.net/Paulie_D/bjFj3/4/

    # September 10, 2011 at 10:19 am

    can you be more specific? which section of the page – the main list of articles, or the popular list in the sidebar, or both? The main list seems to be working as is?

    # September 10, 2011 at 12:36 pm

    I think he’s tweaked it. As I recall, it didn’t quite look the same yesterday.

    # September 10, 2011 at 12:50 pm

    Is this what you’re looking for: http://jsfiddle.net/2vN9E/
    (Thanks for the starting point Paulie_D.)

    # September 15, 2011 at 3:46 pm

    Sorry everybody! Family emergency came up. I ended using a conditional div to make this work.

    # September 15, 2011 at 3:50 pm

    you probably didn’t need to go that route. Adding overflow: hidden to the paragraph changes its block formatting context and would not flow around a float next to it, but would be unaffected if on its own.

    # September 15, 2011 at 3:54 pm

    Thanks, I’m giving that a try!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".