Skip navigation
Tyharo
Tyharo Calculating status...
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.

297 Views   5 Replies   Latest reply: Sudarshan Thiagarajan, Mar 1, 2013 10:53 PM
 
Replies
  • Sudarshan Thiagarajan
    3,738 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Mar 1, 2013 8:27 PM   in reply to Tyharo
    Report

    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:
  • Tyharo
    Currently Being Moderated
    2. Tyharo,
    Mar 1, 2013 9:16 PM   in reply to Sudarshan Thiagarajan
    Report

    heres the page: http://tyharo.x10.mx/

    I'm just tinkering with some layouts so it looks terrible.

    and heres my css:

     

    @charset "utf-8";

    /* CSS Document */

    body {

              margin:0;

              padding:0;

              height:100%;

    }

    .menublock {

              height:50px;

              width:52.6%;

              margin-bottom:0;

              margin-top:0;

              margin-left:23.7%;

              margin-right:23.7%;

              background-color:#CCC;

              overflow:hidden;

              position:relative;

    }

    .windowblock {

              width:100%;

              height:50px;

              background-color:#3399FF;

              border-bottom:inset;

              border-top:inset;

              border-bottom-color:#999999;

              border-top-color:#FFFFFF;

    }

    .bodyblock {

              height:50px;

              width:52.6%;

              height:250px;

              margin-bottom:0;

              margin-top:0;

              margin-left:23.7%;

              margin-right:23.7%;

              background-color:#CCC;

              overflow:hidden;

              position:relative;

    }

    #line1 {

              float:left;

              width:26.8%;

              height:250px;

              border-width:3px;

              margin-top:3px;

    }

    #line2 {

              float:left;

              margin-top:0;

              width:45%;

              height:250px;

              min-width:45%;

              position:relative;

    }

    #line3 {

              float:left;

              width:26.8%;

              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;

    }

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

    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:
  • Tyharo
    Currently Being Moderated
    4. Tyharo,
    Mar 1, 2013 10:45 PM   in reply to Sudarshan Thiagarajan
    Report

    Thanks, that worked!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,738 posts
    Oct 15, 2010
    Currently Being Moderated
    5. Sudarshan Thiagarajan,
    Mar 1, 2013 10:53 PM   in reply to Tyharo
    Report

    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:
Actions

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