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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts

    Container div problem

    Gidday

    I have a main container div (#mainContainer), which contains another container div (#returned), that has HTML retrieved from php via AJAX displayed in it. The problem is that #returned is over-running the border of #mainContainer.

    I notice that giving #mainContainer a left float fixes the problem, but I want it to be centered, not aligned left.

    How do I make #mainContainer adjust to the height of #returned? Is it a matter of having a third div to contain the other two, and float this new one left, or is there a better way to do this?

    CSS (display is 'none' as this div is shown when a button is clicked):
    Code:
    .mainContainer { background-color:#252525;  display:none; border:solid #555; border-width:thin; padding:8px; color:#fff; height:auto; margin-left:auto; margin-right:auto; width:294px; }
    html:
    Code:
    <div class="mainContainer">
    
        some text in here
    
        <div id="returned" style="width:100%; background-color:#0F0; height:auto; float:left; display:block;"></div>
    
    </div>
    Thanks for your help.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Just remove width:100% and Float:left properties from returned <div>

    and try

  • The Following 2 Users Say Thank You to vikram1vicky For This Useful Post:

    juliarose (08-02-2012), shaunthomson (07-31-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Thanks Vikram - that worked perfectly!

    Would you mind explaining why?

    Cheers

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    When you float something, it is removed from the usual flow of the page, and doesn't directly respond to its parent, this cannot be positioned (centered) by typical means.

    As for width, this is one I've always found frustrating. As much as I wish width: 100% meant "fit to 100% of your parent", I've found it to actually mean "fit 100% of the screen width"... someone correct me if I'm wrong on that one.

  • Users who have thanked Keleth for this post:

    shaunthomson (07-31-2012)

  • #5
    New Coder
    Join Date
    May 2012
    Posts
    89
    Thanks
    51
    Thanked 0 Times in 0 Posts
    Cheers Keleth


  •  

    Posting Permissions

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