SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Width problems

  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Width problems

    I'm working on my first website located at http://www.longklaw.com and I started having trouble when I tried to make some changes . I have a header, a middle section (left sidebar, center, right sidebar), and a footer. As you can see, the container seems to be bigger than the total size of the sections and I cannot figure out how to fix it. I figured that it might be a padding/margin issue. I want the page to end where the borders separating the sections on the right sidebar ends. My CSS follows. Thanks in advance for the help.


    DIV { margin: 0px;}

    body {
    margin: 5px 5px 5px 5px;
    background-color: #000000;
    text-align: left;
    }

    a {
    text-decoration: underline;
    }

    a:link {
    color: #0000FF;
    }

    a:visited {
    color: #8A2BE2;
    }

    a:active {
    color: #0000FF;
    }

    a:hover {
    color: #006699;
    }

    h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    }

    .container {
    line-height: 140%;
    margin-right: 0px;
    margin-left: 0px;
    text-align: left;
    padding: 0px;
    width: 98%;
    background-color: #FFFFFF;
    border: 0px solid #FFFFFF;
    }

    .banner {
    font-family: Verdana,Arial,sans-serif;
    color: #000000;
    background-color: #FFFFFF;
    text-align: left;
    padding: 15px 0px 0px 10px;
    border: 0px solid #000000;
    height: 39px;


    }

    .banner-img {
    display: none;
    }

    .banner a {
    color: #999999;
    text-decoration: none;
    }

    .banner h1 {
    font-size: xx-large;
    }

    .banner h2 {
    font-size: small;
    }

    .navigation {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    font-size: small;

    margin-top: 5px;

    border: solid 0px #000000;
    }

    .navigation table {
    border-collapse: collapse;
    margin: 0px
    }

    .navigation td {
    border-color: #999999;
    border: 1px solid;
    }

    .content {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    background-color: #ffffff;
    padding: 15px 15px 5px 15px;
    }

    .content blockquote {
    line-height: 150%;
    }

    .content li {
    line-height: 150%;
    }

    .content p.posted {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    line-height: normal;
    text-align: left;
    margin-bottom: 25px;
    padding: 3px;
    border-top: 1px solid #999999;
    }

    .content h2 {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    }

    .content h3 {
    color: #000000;
    font-size: small;
    font-family: Verdana,Arial,sans-serif;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    }

    .sidebar {
    padding: 0px;
    float: left;
    width: 20%;
    background-color: #FFFFFF;
    overflow: hidden;
    border-right: solid 0px #000000;
    }

    .sidebar p {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    font-weight: normal;
    line-height: 140%;
    text-align: left;
    margin: 0px;

    }

    .sidebar h2 {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
    }

    .sidebar border {
    margin: 0px;
    padding: 0px;
    }

    .sidebar ul {
    margin: 0px;
    padding: 0px;
    }

    .sidebar li {
    color: #000000;
    font-size: x-small;
    font-family: Verdana,Arial,sans-serif;
    line-height: 140%;
    text-align: left;
    list-style-type: none;
    margin: 0px;
    }

    .sidebar img {
    border: solid 3px #ffffff;
    }

    .sidesection {
    color: #000000;
    font-family: Verdana,Arial,sans-serif;
    font-size: x-small;
    line-height: 140%;
    text-align: left;
    padding: 15px;
    margin: 0px;
    border-bottom: 1px solid #999999;

    }

    .center {
    float: left;
    width: 57%;
    overflow: hidden;
    border-right: 1px solid #999999;
    border-left: 1px solid #999999;
    }

    .clearer {
    height: 1px;
    overflow: hidden;
    clear: both;
    margin-top: -1px;
    }

    .footer {
    color: #000000;
    float: left;
    font-family: Verdana,Arial,sans-serif;
    font-size: x-small;
    line-height: 140%;
    text-align: left;
    width: 98%;
    padding: 15px;
    margin-bottom: 0px;
    background-color: #FFFFFF;
    border-top: 1px solid #999999;
    overflow: hidden;
    }

    .calendar {
    line-height: 140%;
    color: #666666;
    font-family: Verdana,Arial,sans-serif;
    font-size: x-small;
    padding: 15px;
    text-align: center;
    margin-bottom: 0px;
    border-bottom: 1px solid #999999;

    }

    .calendar table {
    padding: 2px;
    border-collapse: collapse;
    border: 0px;
    width: 100%;
    }

    .calendar caption {
    color: #000000;
    font-family: Verdana,Arial,sans-serif;
    font-size: x-small;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    }

    .calendar th {
    text-align: center;
    font-weight: normal;
    }

    .calendar td {
    text-align: center;
    }

    .photo {
    text-align: left;
    margin-bottom: 20px;
    }

    .comment-data {
    float: left;
    width: 180px;
    padding-right: 15px;
    margin-right: 0px;
    text-align: left;
    border-right: 1px dotted #BBB;
    }

    textarea[id="comment-text"] {
    width: 80%;
    }

  2. #2
    SitePoint Member reh3363's Avatar
    Join Date
    Aug 2004
    Location
    Las Vegas, NV
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    this might work

    I'm not exactly sure what you are trying to do but this might work. If you change the width in .container from 98% to 100% that will make your columns take up all of the available space.

    .container {
    line-height: 140%;
    margin-right: 0px;
    margin-left: 0px;
    text-align: left;
    padding: 0px;
    width: 100%;
    background-color: #FFFFFF;
    border: 0px solid #FFFFFF;
    }

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did that but it didn't have the result the that I was expecting. You can see it by visiting the same link. Any more suggestions?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure which borders or which page ends you are talking about? Could you clarify a little more for my simple brain

    You have defined your footer like this:
    Code:
    .footer	{
     color: #000000;
     float: left;
     font-family: Verdana,Arial,sans-serif;
     font-size: x-small;
     line-height: 140%;
     text-align: left;
    	    width:98%;
     padding: 15px;
     background-color: #FFFFFF;
     border-top: 1px solid #999999;
     overflow: hidden;
    }
    How big is 98% plus 30px padding? It is likely to be more than 100% in most cases and will stretch your page wide. You can't specify padding and percentages and expect them to add up. You will either have to have 1% padding or put your padding on an inner element and the outer can then be 100% or whatever its supposed to be.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I'm not sure which borders or which page ends you are talking about? Could you clarify a little more for my simple brain

    You have defined your footer like this:
    Code:
    .footer	{
     color: #000000;
     float: left;
     font-family: Verdana,Arial,sans-serif;
     font-size: x-small;
     line-height: 140%;
     text-align: left;
    	    width:98%;
     padding: 15px;
     background-color: #FFFFFF;
     border-top: 1px solid #999999;
     overflow: hidden;
    }
    How big is 98% plus 30px padding? It is likely to be more than 100% in most cases and will stretch your page wide. You can't specify padding and percentages and expect them to add up. You will either have to have 1% padding or put your padding on an inner element and the outer can then be 100% or whatever its supposed to be.

    Paul
    I made some changes late last night so some of the original problems were gone by the time you saw it. Thanks for the help with the footer. It now looks fine on my local machine. I'll upload them to the server soon. I'm grateful for all the help. This has been a learning experience.


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
  •