SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Use Browser Scroll Instead of Div?

    Newbie question, I tried searching but just gave up.

    I am trying to do my first simple website in all CSS with no tables.

    I have a block div to create a general page layout area. This div has:

    overflow: auto;

    I have a content div within the block div to control the content. When the content is longer than the page, everything expands as it should, but the parent div has the scrollbar.

    How do I keep the content enabled to expand vertically, but just let the user scroll the browser window instead of having to use the div scrollbar?

    TIA

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't set overflow:auto on the parent div.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That does in fact fix the scrollbar issue, but now my layout no longer looks right.

    I think I will have to live with the scroll bars until I can revisit this and really master the whole div concept.

    I have created a page that no longer has any tables, so I suppose that is at least a small step in the right direction. But I am still having to use some absolute positioning to make it all work, I guess I will have to continue to work on it to get the floating div design figured out.

    Thanks.

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Did you specify a height value on your content div?
    Ryan B | My Blog | Twitter

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. My basic layout is:

    <divContentWrapper>
    <divSidebar>
    ...
    </div><!-- End divSidebar-->
    <divContent>
    ...
    </div><!-- End divContent -->
    </div><!-- End divContentWrapper>

    There is no height specified on divContent.

    I specified 75&#37; as the height for divContentWrapper, because I got frustrated with trying to really figure out the specifics of floating divs and cheated by using absolute positioning to pin down the sidebar and the content side by side.

    UI design is tedious and painful for me. I'm having a hard time transitioning away from the table mentality. I have tried to shortcut by looking at some web site page source, but many have so much css and content, I get lost. I have tried playing with the simple 3 column models I find in tutorials, and that is simple enough, until I try to start adding and lining up graphical headers and a menu that has dynamic images.

    I guess I really need to start at the basics and actually figure this stuff out.

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Does your code look like that exactly? You need class="" or id="" in the opening divs. I only use pixel or em to specify heights usually...
    Ryan B | My Blog | Twitter

  7. #7
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it has the ids for each div. I was just putting the hierarchy in. I suppose to really pursue this I need to put something up on the web ...

  8. #8
    Non-Member
    Join Date
    May 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Currently I have the content within the tab as a div with width specified in its style. I have a tabview with the tab's content that is more than the browser window size both in height and width. I am wondering how can I get the content to be displayed within the tab, such that when the content is more that the browser view port width or height.

  9. #9
    Non-Member
    Join Date
    Jun 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am also trying out the solutions that you have provided, but not able to get the desired result.

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RobertNC View Post
    I suppose to really pursue this I need to put something up on the web ...
    That would be helpful. Since you can't post links yet, write it as follows:

    www dot fubar dot com slash mysite dot html

    or something like that.


Bookmarks

Posting Permissions

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