Forums

Give help. Get help.

  • # December 30, 2017 at 8:46 pm

    When I use margin 0 auto on my inner div, only the side of my inner div is on the center of the outer div while the rest is sticking out. I want to center my inner div horizontally to my outer div. Here is my codepen to the problem https://codepen.io/icewizard/pen/xpdpWK . Also is there any way I can get inner div to go near the top of my outer div without making the outer div position: relative and my inner div position absolute? I want my inner div to look like the quote box in this code pen https://codepen.io/1kindjune/pen/eJKQMY, and there they don’t seem to be using position absolute to make the quote box go to the top of the outer div. Currently my inner div is in the vertical center of the outer div.

    # December 31, 2017 at 2:29 am

    only the side of my inner div is on the center of the outer div while the rest is sticking out.

    That’s probably due to the huge padding you’ve used to create width/height, in lieu of real text/content. Example: on .center-box you’ve got a combine horizontal padding of 14em, yet the width is set as 4em… that’s really screwing with the alignment. If you reduce the padding to more realistic values, and use real content so that you can see what’s happening, it will be easier to build your quote box.

    Also is there any way I can get inner div to go near the top of my outer div without making the outer div position: relative and my inner div position absolute?

    Top alignment is the default, but again, those huge paddings, minus any real content, are making it difficult to see. The outer div will expand to the height of the inner div, unless a height/min-height is set, so to create the appearance of top-alignment, you could put a bottom margin on the content, or just increase the bottom padding more than the top on the container.

    # January 1, 2018 at 12:19 pm

    alright thanks. I got confused and thought padding was the same as width and height but I remember the difference now.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag