Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design centering a div within a div margin 0 auto is not working

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #264699
    icewizard
    Participant

    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.

    #264700
    Beverleyh
    Participant

    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.

    #264747
    icewizard
    Participant

    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)
  • The forum ‘Design’ is closed to new topics and replies.