Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with div margin and inline display

    I have 3 containers. I'm trying to get 2 containers inside the 3rd container but I cannot seem to get it.
    Here is my code:
    http://codepen.io/overdrivemachines/pen/bIith
    Few questions:
    1) How do I get inner-container2 inside of outer-container?
    2) Why is there a gap between the body border and outer-container?
    3) Why is there no 10px margin above inner-container1?
    Your help will relieve a lot of frustration. Thank you.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    1) How do I get inner-container2 inside of outer-container?
    By removing the explicit height on outer-container - currently it doesn't contain it because it isn't big enough

    2) Why is there a gap between the body border and outer-container?
    Because outer-container has a set width of 960px giving the side margins, and inner-container1 has a margin-top of 10px

    3) Why is there no 10px margin above inner-container1?
    There is, see above. If you want to move this div down from the top of outer-container try applying padding:10px on outer-container and removing the margin from inner-container1.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your response. outer-container is big enough because its height is 420px where as the height of the inner-container is 400px. So with 10px margin top and bottom it will be exactly sufficient to fit in.
    I tried removing margin from inner-container1 and added padding to outer-container but it does not work.

    Please help.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    dc366, Your link shows no code. Did you remove it?
    Post your code here please. Use the [code] tags and very little space is used.
    Evolution - The non-random survival of random variants.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    dc366, Your link shows no code. Did you remove it?
    Post your code here please. Use the [code] tags and very little space is used.
    No the code is not removed. You can find it here:
    http://codepen.io/overdrivemachines/pen/bIith
    Make sure you do a hard refresh when you view that page.

    Alternatively here is the code:

    HTML:
    <div class="outer-container">
    <div class="inner-container1">
    </div>
    <div class="inner-container2">
    </div>
    </div>


    CSS, make sure you have reset.css included before this:
    body {
    border-top: solid 5px #f57d31;
    }

    .outer-container {
    width: 960px;
    background-color: #666;
    margin: 20px auto;
    padding: 10px;
    display: block;
    }

    .inner-container1 {
    width: 290px;
    height: 400px;
    border-radius: 6px;
    background-color: #f57d31;
    display: inline-block;
    }

    .inner-container2 {
    width: 620px;
    height: 400px;
    border-radius: 6px;
    background-color: #f57d31;
    display: inline-block;
    float: right;
    }


    All I'm trying to do is make inner-container1 and inner-container2 inside outer-container. I have a couple more questions:
    1) Why is the height of outer-container 422px when the height of inner-container is 400px and outer-container has a padding of 10px top and bottom. That should add up to 400px.

    Your help is appreciated.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Quote Originally Posted by dc366 View Post
    1) Why is the height of outer-container 422px when the height of inner-container is 400px and outer-container has a padding of 10px top and bottom. That should add up to 400px.
    No 10 plus 10 plus 400 is 420px, and that's what I measure after removing float: right; from .inner-container2. You need to do this to put both divs inside the outer div.
    The display: inline-block; places both inner divs to be INLINE, the float is not needed nor wanted.

    Code:
    .inner-container2 {
    	width: 620px;
    	height: 400px;
    	border-radius: 6px;
    	background-color: #f57d31;
    	display: inline-block;
    }
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made a typo in my previous message agreed.

    Well I'm measuring outer-container and it says it is 422px. In other words the outer-container is 2px bigger than its supposed to be. Paste the code in a html file and inspect the outer-container in chrome or see it in codepen.io. You can also confirm this strange thing if you remove the padding for the outer-container, you will see the outer-container exceeds the inner-container at the bottom by 2px.
    Why is this occurring?
    Last edited by dc366; 07-07-2013 at 04:13 AM.

  • #8
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Well I'm not 100% sure but it would seem to me the container would have to be bigger than the content it contains. So, it has to surround 10+400+10. It's edge will be one pixel outside that on each side. Therefore 1+10+400+10+1 = 422.

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #9
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I'm hoping to find out the cause of the 2 added pixes in outer-container. I would also like to see official documentation for this. I have never heard or read about such a thing.

  • #10
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Yeah now that I think about it, that doesn't make a ton of sense.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #11
    New Coder
    Join Date
    Jan 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can a professional please help figure this out?

  • #12
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    lol technically I am a professional

    So, if you put content inside the two divs, you get the right height. Weird.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The extra pixels are coming because you have defined both inner containers as inline-block. An inline element will have a small space underneath it to allow for the tails of g,p,q etc. To remove this you can float both elements and clear the float on outer-container - making your css:

    Code:
    body {
    border-top: solid 5px #f57d31;
    }
    
    .outer-container {
    width: 960px;
    background-color: #666;
    margin: 20px auto;
    padding: 10px;
    overflow:hidden;/*clear the float*/
    }
    
    .inner-container1 {
    width: 290px;
    height: 400px;
    border-radius: 6px;
    background-color: #f57d31;
    float:left
    }
    
    .inner-container2 {
    width: 620px;
    height: 400px;
    border-radius: 6px;
    background-color: #f57d31;
    float: right;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    whizard (07-07-2013)

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Note: Looks like SB65 beat me to it, but I'll post this anyway since it offers a slightly different approach.

    Quote Originally Posted by dc366 View Post
    Well I'm measuring outer-container and it says it is 422px. In other words the outer-container is 2px bigger than its supposed to be. Paste the code in a html file and inspect the outer-container in chrome or see it in codepen.io. You can also confirm this strange thing if you remove the padding for the outer-container, you will see the outer-container exceeds the inner-container at the bottom by 2px.
    Why is this occurring?
    Elements that are display: inline-block display and flow as if they were text. The bottom of the inline-block element sits on the text baseline, and below that baseline is a descender space (for letters like g, j, p, q, and y). Descender space is the source of the extra pixels.

    To align your two inline elements to the bottom of the line (i.e., the bottom of the descender space) and eliminate the extra pixels, you can use vertical-align: bottom on both of them.

    If you want to avoid the whole inline issue:
    • Remove display: inline-block from both elements (thereby falling back to display: block).
    • Unfloat .inner-container2 and float .inner-container1 to the left instead.
    • Align .inner-container2 to the right via margin-left: auto.

    The latter approach will shorten your code by three declarations.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    whizard (07-07-2013)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •