Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jun 2018
    Posts
    1
    Member #
    59284

    CSS newbie problem

    I've downloaded a simple design from a free template site but I would like to increase the width. However, when I increase the container width from 750px to 850px I get a vertical line in the output on the right hand side :



    Here is the CSS file:

    body {
    background: #CACACA url(images/background.png) repeat-x;
    font-family: "Trebuchet MS", Verdana, serif
    }
    #container {
    margin: 0 auto;
    width: 750px
    }
    #header {
    width: 100%
    }
    #sub_header {
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    padding-right: 20px;
    padding-bottom: 20px;
    }
    #main_content {
    margin: 0 auto;
    width: 100%;
    background: #FFFFFF url('images/background_content.gif');
    background-repeat: repeat-y
    }
    #main_content_top {
    height: 30px;
    background: #FFFFFF url('images/background_top.gif');
    }
    #main_content_bottom {
    height: 30px;
    background: #FFFFFF url('images/background_bottom.gif');
    }
    #footer {
    text-align: center;
    font-size: 12px;
    margin: 10px auto
    }
    .content {
    float: left;
    width: 510px;
    text-align: justify;
    padding: 0 30px 0 30px;
    font-size: 12px
    }
    .menu {
    width: 139px;
    float: right;
    padding: 0 20px 0 20px;
    border-left: #8C8484 1px solid;
    font-size: 12px
    }
    .menu ul {
    margin: 0;
    padding: 10px 0 10px 15px
    }
    .menu il {
    list-style-type: disc
    }
    #header h1 {
    margin-bottom: 0px;
    font-size: 28px;
    font-weight: bold;
    color: #A40008
    }
    .content h2 {
    margin-top: 0px;
    font-size: 18px;
    font-weight: bold;
    color: #A40008
    }
    #clear {
    display: block;
    clear: both;
    width: 100%;
    height:1px;
    overflow:hidden;
    }
    .menu_title {
    font-size: 18px;
    font-weight: bold;
    color: #A40008
    }
    .menu ul {
    margin: 0;
    padding: 10px 0 20px 15px
    }
    .menu li {
    padding-top: 2px;
    list-style-type: circle
    }
    a {
    color: #A40008;
    font-weight: bold;
    text-decoration: none
    }
    a:hover {
    color: #A40008;
    font-weight: bold;
    text-decoration: underline
    }
    a.menu_link {
    color: #000000;
    font-weight: bold;
    text-decoration: underline
    }
    a.menu_link:hover {
    color: #A40008;
    font-weight: bold;
    text-decoration: none
    }
    .quote {
    margin: 20px;
    text-align: center;
    font-weight: bold;
    font-style: italic
    }
    Could someone kindly tell me the correct way to increase the width? Thanks in advance for any help.

  2.  

  3. #2
    Junior Member qba82's Avatar
    Join Date
    Jun 2018
    Posts
    9
    Member #
    59292
    In firefox You can use "analyze element" and click on that line, and check what is it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com