Skip navigation
Tyharo
Currently Being Moderated

Horizontal Scroll Bar Appear?

Mar 1, 2013 5:15 PM

Tags: #horizontal #dreamweaver #css #layout #html5 #resize #scrolling_bar

How can I make a horizontal scroll bar appear so when the web page is resized the content wont moved around or get compacted? Example: http://www.techrepublic.com/ (resize thebrowser and youll notice that after a certain amount of resizing a horizontal scroll bar appears)

All my width values in my CSS are in percentages and when the page is shrunk the sontent gets compacted.

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 8:27 PM   in reply to Tyharo

    It must be 'overflow' selector in your body CSS usually. Can we see your code/ CSS to see where it is wrong? Also, a URL to your current page on the web would help us look into it.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 9:54 PM   in reply to Tyharo

    Edit your HTML like this:

     

    Add

     

    <div class="container">

    just after opening <body> tag.

     

    Add

     

    </div>

    just before closing </body> tag. By doing this, you're wrapping all existing content into a DIV called 'container'.

     

    Now, CSS - replace your current code with this:

     

    @charset "utf-8";

    /* CSS Document */

    body {

        margin:0;

        padding:0;

    }

    .container{

    margin: 0 auto;

    width: 960px;

    }

    .menublock {

        height:50px;

        background-color:#CCC;

        overflow:hidden;

        position:relative;

    }

    .windowblock {

        height:50px;

        background-color:#3399FF;

        border-bottom:inset;

        border-top:inset;

        border-bottom-color:#999999;

        border-top-color:#FFFFFF;

    }

    .bodyblock {

        height:50px;

        height:250px;   

        background-color:#CCC;

        position:relative;

    }

    #line1 {

        float:left;

        width:240px;

        min-height:250px;

        border-width:3px;

        margin-top:3px;

    }

    #line2 {

        float:left;

        margin-top:0;

        width:480px;

        min-height:250px;

        position:relative;

    }

    #line3 {

        float:left;

        width:240px;

        min-height:250px;

        margin-top:3px;

    }

    #sectiongap {

        width:100%;

    }

    #menu {

        margin-left:30%;

        margin-top:3%

    }

    #footer {

       

    }

    ul.horizontal{

        margin:0;

        padding:0;

        list-style-type:none;

        text-align:center;

    }

    ul.horizontal li{

        display:block;

        float:left;

        padding:0 10px;

    }

    Try it out.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 1, 2013 10:53 PM   in reply to Tyharo

    I did see your previous post (which I think you deleted). The horizontal resize WILL happen if your child elements have a relative % width defined in comparison to its parent.

     

    The only thing I changed in the code above is to wrap all content within a container first. Give a fixed width to the container and align it horizontal center by using 'margin: 0 auto'. Then flow your content within the container div. This is what you see on TR website as well.

     

    Glad it worked the way it should and that your issue is fixed

     

    Feel free to post back if you have any more questions.

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points