Grow your CSS skills. Land your dream job.

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](http://jsfiddle.net/WV3qv/2/ “http://jsfiddle.net/WV3qv/2/”)

    # April 26, 2013 at 5:05 am

    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`.

    http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

    # 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?

    http://jsfiddle.net/yehbd/1/

    # 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

    @Keilowe
    > 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_ ](http://www.fivesimplesteps.com/products/css3-layout-modules “css3 layout modules”) : recommended

    some more links:

    * [using flexbox on css-tricks.com](http://css-tricks.com/using-flexbox/ “using flexbox on css-tricks.com”)
    * [related links by Rachel Andrew](http://www.rachelandrew.co.uk/presentations/new-css-layout “related links by Rachel Andrew”)
    * [talk by Eric Meyer on new layout modules](http://www.youtube.com/watch?v=XKpiP60HXwM “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

    `box-sizing:border-box`

    That will solve it. – http://codepen.io/anon/pen/dpjyq

    # 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

    http://caniuse.com/#feat=css3-boxsizing

    Pretty much all browsers yeah ^^

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

You must be logged in to reply to this topic.

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