The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Issue with “Inner” div that sets a 20px Padding inside parent div

  • # April 26, 2013 at 3:43 am

    I was using “inner” as a child div with a padding of 20px.
    The issue is, when I float an element to the left and the second element to the right the “inner” div totally collapses.
    Acts as if there is no padding at all…
    I’d have to add a second class attribute named “clearfix” just so the parent div can expand to fit all of it’s content…
    I find it quite annoying to repeatedly add “clearfix” to every single div that needs the padding…
    I also use 2 divs named “left” and “right” that obviously float left and right.
    What can I do to fix this?

    Please, Help.

    [Fiddle]( “”)

    # April 26, 2013 at 5:05 am

    This reply has been reported for inappropriate content.

    Nothing to fix here, but I know what you mean, … but just consider clearing a feature of floats, and maybe start experimenting with flexbox.

    # April 26, 2013 at 5:26 am

    @Atelierbram What exactly is flexbox?

    # April 26, 2013 at 5:33 am

    > What can I do to fix this?

    You could also look into `inline-block`.

    # April 26, 2013 at 5:38 am

    >I was using “inner” as a child div with a padding of 20px.

    On thinking about it….Why? Can’t you add the padding to the header?

    # April 26, 2013 at 7:28 am

    I like Paulie’s idea, or you could simply add overflow: hidden; to the padded child and not need to add a class every time.

    # April 26, 2013 at 8:46 am

    This reply has been reported for inappropriate content.


    The CSS flexible box layout module, commonly referred to as flexbox, gives us a brand new layout mode in CSS – flex layout. It has been designed to make it easier to layout complex applications and webpages.

    Quote above ( are the first lines of Chapter 2 on Flexbox ) from CSS3 layout modules by Rachel Andrew : recommended

    some more links:

    * using flexbox on
    * related links by Rachel Andrew
    * talk by Eric Meyer on new layout modules

    # April 26, 2013 at 12:44 pm

    @paulie_d I wanted the padding inside of specific divs without expanding the parent….

    # April 26, 2013 at 2:08 pm

    Then you can use


    That will solve it. –

    # April 26, 2013 at 7:15 pm

    @paulie_D does that work on all browsers?
    I will give it a try :)
    Thank you.

    # April 26, 2013 at 8:34 pm

    Pretty much all browsers yeah ^^

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed