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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts

    Question Alternative to overflow:hidden?

    Hey.

    If i have a page with a div, and then have one or more divs floating inside there, the wrapper div wont expand vertically, right? At least it doesn't for me. The only solution i find working is if i put "overflow:hidden" to the wrapper div, but that hides everything that overflows horisontally (but it expands vertically), and i don't really want that. If i use overflow:auto or overflow:scroll, it will use a bunch of scrollbars instead, which i really don't prefer to use.

    So, is there any way to make a wrapper div (with floating elements inside) expand itself when the floating divs inside is too big, without using overflow:hidden?

    This must sounds really weird. I hope you understand me. I wish i could explain it another way...

    Thanks in advance.
    -Nike

  • #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 nikee View Post
    Hey.

    If i have a page with a div, and then have one or more divs floating inside there, the wrapper div wont expand vertically, right? At least it doesn't for me. The only solution i find working is if i put "overflow:hidden" to the wrapper div, but that hides everything that overflows horisontally (but it expands vertically), and i don't really want that. If i use overflow:auto or overflow:scroll, it will use a bunch of scrollbars instead, which i really don't prefer to use.

    So, is there any way to make a wrapper div (with floating elements inside) expand itself when the floating divs inside is too big, without using overflow:hidden?

    This must sounds really weird. I hope you understand me. I wish i could explain it another way...

    Thanks in advance.
    -Nike
    There is a "sloppy" method that uses wasteful extra markup, but it will get the job done and pass validation. Just create a class of div to clear floats and insert it (completely empty) into the HTML just after the container you want to expand.

    HTML:
    Code:
    <div class="clear"></div>
    CSS:
    Code:
    .clear {clear:both;}
    Give that a try and see if it's what you needed.
    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

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Yess, thanks dude! At first, i didn't know where to place it. But then i got it, and it's working. Thanks for the tip dude!

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Rowsdower's method will work, but a better technique is simply to clear your floats using CSS.
    matt | design | blog

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Hey again. I just ran into a new problem.

    Look at this screenshot.

    As you can see, there is a big white "space" between #main-content-wrapper and #cat-header. I have absolutely no idea how it's showing up. It is coming from the div with the class ".main-content-top-notification", but shouldn't that space go between the div with the class ".main-content" and the div with the class ".main-content-top-notification"?

    Once again, i hope you understand what i mean cause i'm not an expert at explaining things ^^

  • #6
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    We can't do much if we can't see your code. Screenshots are marginally helpful at best.

    Does your WP template's CSS include a reset at the beginning, something to the effect of

    Code:
    * {
      padding:0;
      margin:0;
    }
    that will zero out all the browser defaults?
    matt | design | blog

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Yes it does. I added the following code to the css.

    Code:
    * {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
    I'm actually working on the site locally (or whatever you say... i have Apache installed..).

    Try going here for the source:
    Link removed since it wasn't working anyways...
    Last edited by nikee; 07-28-2009 at 07:19 PM.

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Did everyone die now?

  • #9
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by nikee View Post
    Did everyone die now?
    No, but your link is.
    matt | design | blog

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    It is? It works for me... alright, i'll post the css and the html (how the html is rendered in my webbrowser).

    EDIT: Download it instead...
    Last edited by nikee; 07-28-2009 at 08:59 PM.

  • #11
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Give this a shot:

    Code:
    .main-content {
        width: 900px;
        margin: auto;
        background: #FFFFFF;
        min-height: 200px;
        padding-top:10px;
    }
    
    .main-content-top-notification {
        background: #E5C943;
        padding: 10px 15px;
        margin-bottom: 10px;
        clear: both;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        text-align: center;
        font-weight: bold;
    }
    matt | design | blog

  • #12
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    Just by adding "padding-top: 10px" to .main-content solves it. But i have a feeling that isn't the right way of solving it. I shouldn't need to add a padding to the top. Why isn't the margin-top applying directly to the .main-content instead of #cat-header?

    Oh and i just saw that it works as it should in IE. I haven't tested it on other browsers, but i think it works. It seems like some kind of firefox bug?

    It's just weird!
    Last edited by nikee; 07-28-2009 at 10:41 PM.

  • #13
    Regular Coder
    Join Date
    Jan 2009
    Posts
    173
    Thanks
    5
    Thanked 12 Times in 11 Posts
    No other suggestions?


  •  

    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
    •