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 6 of 6
  1. #1
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts

    hot make div box fluid according to content

    i have the following design

    PHP Code:
    <div  Wrapper>

            <
    div header></div>


             <
    div content>


                       <
    div left></div>
                       <
    div rightContent>
                              <
    div main content></div>
                             <
    div bottom advertisement></div>

                        </
    div>

              </
    div>

    </
    div


    I want that if my content in mainContent expands then wrapper , content shouldalso expand according to it
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by o0O0o.o0O0o View Post
    i have the following design

    PHP Code:
    <div  Wrapper>

            <
    div header></div>


             <
    div content>


                       <
    div left></div>
                       <
    div rightContent>
                              <
    div main content></div>
                             <
    div bottom advertisement></div>

                        </
    div>

              </
    div>

    </
    div


    I want that if my content in mainContent expands then wrapper , content shouldalso expand according to it
    Ok, but what is the actual code you are using now (including CSS)? As long as you don't specify a set height for the wrapper or container then this should expand automatically. If you have floated items that aren't expanding the container then you can add overflow: auto; to the container (wrapper should then expand to meet the needs of the container automatically so no need to add it again there). I suspect this is related to your problem given that you have a div left and div right in there, but I can only guess right now.

    Really, we'd need to see your full source code to tell why this isn't happening to begin with so we can tell you how to fix it. This could be related to a number of factors...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    o0O0o.o0O0o (05-15-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Your code is invalid! Check the validator to see the errors it finds - see links in my sig below.


    You need to specify if <div wrapper> is an id or a class.
    Your <div main content> could be multiple id's or classes since neither is allowed a space.

    Rowsdower! is right, your container will automatically expand to enclose any content you put in it as long as you have your width's right and clear your floats.
    Check the box model to see how to determine widths.
    Have a look at http://www.quirksmode.org/css/clearing.html to see about clearing floats so your container will enclose them as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    o0O0o.o0O0o (05-15-2009)

  • #4
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    Acually code is valid , i have just put the text as description , its not the actual code.

    But that overflow:auto did the trick

    thanks for that
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    And please also read up on why this works:
    1. Containing Floats
    2. Block formatting context (read my reply further down)

  • Users who have thanked VIPStephan for this post:

    o0O0o.o0O0o (05-15-2009)

  • #6
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    OMG! all that stuff about floats is great. I never knew about that . thats why i were having so many problems with that . Now i really learning some css
    Please de-reputate me
    © 0o0o0o0

    Its better to rule in Hell then to serve in Heaven


  •  

    Posting Permissions

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