www.webdeveloper.com
Results 1 to 6 of 6

Thread: DIV not affect horizonal scroll

  1. #1
    Join Date
    Feb 2006
    Posts
    520

    DIV not affect horizonal scroll

    Hi,

    I have a page that's center aligned on the screen and what I would like to do is add div right next to the right edge of the page outline but do not want that div to affect width of the page. So div doesn't create horizontal scroll and page is still centered as it was before the div. is something like this possible?

    Thanks

  2. #2
    Join Date
    May 2010
    Location
    Midwest USA
    Posts
    16

    Re: DIV not affect horizonal scroll

    Can you post a link to the current page? It's almost impossible to post a solution without a reference layout.

  3. #3
    Join Date
    Feb 2006
    Posts
    520

  4. #4
    Join Date
    May 2010
    Location
    Midwest USA
    Posts
    16

    Re: DIV not affect horizonal scroll

    I'm still not sure what you want, exactly. But take a look at this and tell me if it's something like you had in mind.

    http://tinimi.com/for_others/TiGGi/MensHealth_rev.htm

    You can get by with a 200 px (or so) addon sidebar for monitors with more than 1000 px width resolution.

    There would be a scroll bar on 800 x 600. Also, since your pages are generated HTML, I don't see how you are going to do it, unless you have access to the server modules.
    Last edited by tinimic; 06-11-2010 at 07:22 PM. Reason: Update

  5. #5
    Join Date
    Feb 2006
    Posts
    520
    tinimic,

    Thank you for your help. That's similar to what I want, I just want that sidebar to be outside the content outline and also I want the page to be centered based on the main content and ignore the sidebar.

  6. #6
    Join Date
    May 2010
    Location
    Midwest USA
    Posts
    16

    Re: DIV not affect horizonal scroll

    In that case, it's easy to place an absolutely positioned div outside your container.

    Just change:

    Code:
    <div id="container">
    to

    Code:
    <div id="container" style="position:relative;">
    then add the following line of markup:

    Code:
    <div style="position:absolute; left:758px; top:120px; width:120px;">Content for your sidebar goes here.</div>
    You can play around with width, height, padding, etc. to get the size of the div to your design. You'll get a scroll bar if the browser window is less than the combined width of your container and sidebar, but your container will remain centered on wider windows.

    Hope this helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles