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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post

    child div pushed outside parent div

    This website contains a div id=content and a div id=sidebar, which should display inside the white div id=page.

    Why aren't they?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You need to clear the floats to get that. See http://www.quirksmode.org/css/clearing.html

    Just set overflow:auto; to #page
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    SRD75 (04-19-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Fantastic - thank you abduraooft.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    abduraooft, when I resize the browser down to about 300px width, #page receives a scroll bar.

    Is there anyway to not have this scrollbar?

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    *bump*

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    The overflow:auto shows scrollbars because the containing elements is exceeding the width of the parent element.

    Your #content and #sidebar add up to only 80%, but take a look inside your #sidebar element.

    Code:
    <input type="text" value="" name="s" id="s" />
    That input element starts becoming bigger than the width of #sidebar in smaller browsers.

    You could give that input element a max width:

    Code:
    #s {
        max-width: 90%;
    }
    You can also use overflow:hidden instead of overflow:auto. Hidden, though, will "crop" things out rather than showing a scrollbar.
    My signature :)

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Hi ttkim. This works to some degree, but something else is causing a scroll bar.

  • #8
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Part of your problem is coming out here:

    Code:
    body {
    	line-height: 1;
    }
    Why do you give such a small value for the line-height? Default value is usually around 1.2em or 1.25em. With only 1 em you don't have enough room for the letters going under the baseline like p j or g .... When your window goes small your content is lower then your search button and that makes the vertical scroll bar to appear.

    Juste remove this line-height or set it to a proper value.

    Then the horizontal scroll bar just appears when the search button is wider then the 20% width. An option is to give something like min-width:5em; to #sidebar, to make it going under the content to avoid the scroll bar.

    Otherwise you should know that the overflow:auto is not the only one option to clear the floats. If you don't have any element to add a clear on the bottom of the container, you can use the pseudo-element::after to add the clear:

    Code:
    #page:after {
    	content:"";
    	display:block;
    	height:0;
    	clear:both;
    }
    With that you can remove the overflow:auto and get rid of the unwanted scroll bar appearing. :after works since IE8 but in your case it will even be ok in IE6 and 7 as #page has the layout with the width set.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    SRD75 (05-26-2013)

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks again Candygirl.


  •  

    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
    •