Full page widths in CSS (Wordpress)

Discussion in 'CSS' started by stmcgill, Jan 19, 2009.

0
  1. #1
    Hi there

    I have just changed my site to use Wordpress (www.pda-247.com/wordpress) and would like to make the design use the full width of the screen by maximising the middle content column.

    I have tried messing around with the CSS code using 'auto' and 100%', but it just pushes the right hand column below the middle column.

    Any help would be appreciated, and I am prepared to pay.

    /************************************************
    * Header *
    ************************************************/

    #header {
    width: 960px;
    height: 110px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: normal;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }

    #header p {
    padding: 0px 0px 5px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #header h1 {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    text-decoration: none;
    }

    #header h1 a, #header h1 a:visited {
    color: #FFFFFF;
    font-size: 36px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    text-decoration: none;
    }

    #header h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    .headerleft {
    width: 350px;
    float: left;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    .headerleft a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }

    .headerright {
    width: 600px;
    float: right;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    text-align: right;
    }

    .headerright a, .headerright a:visited {
    color: #FFFFFF;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0px 0px 0px 3px;
    }

    .headerright a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }

    .headerright a img {
    border: none;
    margin: 0px 0px 3px 0px;
    padding: 0px;
    }

    /************************************************
    * Navbar *
    ************************************************/

    #navbar {
    background: #1A4E88;
    width: 960px;
    height: 30px;
    margin: 0px auto 0px;
    padding: 0px;
    overflow: hidden;
    }

    #navbarleft {
    width: 650px;
    float: left;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    }

    #navbarright {
    width: 300px;
    float: right;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    text-align: right;
    }

    #nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #nav a {
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 15px 0px 0px;
    padding: 8px 10px 8px 10px;
    text-decoration: none;
    }

    #nav a:hover {
    background: #4A7EB8;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    margin: 0px 15px 0px 0px;
    padding: 8px 10px 8px 10px;
    }

    #nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }

    #nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 140px;
    }

    #nav li li a, #nav li li a:link, #nav li li a:active, #nav li li a:visited {
    background: #4A7EB8;
    color: #FFFFFF;
    width: 140px;
    font-size: 10px;
    float: none;
    margin: 0px;
    padding: 8px 10px 8px 10px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    text-decoration: none;
    }

    #nav li li a:hover {
    background: #1A4E88;
    color: #FFFFFF;
    padding: 8px 10px 8px 10px;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #nav li:hover ul {
    left: auto;
    display: block;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    /************************************************
    * Content *
    ************************************************/

    #content {
    width: 960px;
    margin: 0px auto 0px;
    padding: 20px 0px 0px 0px;
    }

    #content p {
    padding: 0px 0px 10px 0px;
    margin: 0px;
    line-height: 20px;
    }

    #content h1 {
    color: #2255AA;
    font-size: 24px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 0px;
    padding: 0px 0px 5px 0px;
    }

    #content h1 a {
    color: #2255AA;
    text-decoration: none;
    }

    #content h1 a:hover {
    color: #7DAE12;
    text-decoration: none;
    }

    #content h3 {
    color: #2255AA;
    font-size: 24px;
    font-family: Times New Roman, Georgia, Trebuchet MS;
    font-weight: normal;
    margin: 20px 0px 0px 0px;
    padding: 20px 0px 5px 0px;
    border-top: 1px dotted #999999;
    }

    #content p img {
    float: left;
    border: none;
    margin: 0px 10px 10px 0px;
    }

    #content img.wp-smiley {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #content img.wp-wink {
    float: none;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    #contentleft {
    float: left;
    width: 500px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 20px;
    }

    #contentleft ol {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ol li {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }

    #contentleft ul {
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 10px 0px;
    }

    #contentleft ul li {
    list-style-type: square;
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 5px 0px;
    }

    .date {
    font-size: 11px;
    font-weight: bold;
    padding: 0px;
    margin: 0px 0px 15px 0px;
    }

    .postmeta {
    width: 500px;
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 20px 0px;
    border-bottom: 1px dotted #999999;
    }

    blockquote{
    font-style: italic;
    margin: 0px 25px 15px 25px;
    padding: 0px 25px 0px 10px;
    border-left: 2px solid #4A7EB8;
    }

    #content blockquote p{
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 10px 0px;
    }

    /************************************************
    * Left Sidebar *
    ************************************************/

    #l_sidebar {
    float: left;
    width: 160px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    line-height: 20px;
    }

    #l_sidebar h2 {
    background: #FFFFFF url(images/headline_left.gif);
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    }

    #l_sidebar ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #l_sidebar p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    /************************************************
    * Right Sidebar *
    ************************************************/

    #r_sidebar {
    float: right;
    width: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    line-height: 20px;
    }

    #r_sidebar h2 {
    background: #FFFFFF url(images/headline_right.gif);
    color: #FFFFFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    }

    #r_sidebar ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #r_sidebar p {
    padding: 0px 0px 0px 0px;
    margin: 0px;
    line-height: 20px;
    }

    /************************************************
    * Widgets *
    ************************************************/

    .textwidget {
    margin: 0px 0px 0px 0px;
    padding: 3px 0px 8px 0px;
    }

    #recent-posts ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #recent-posts ul li {
    background: #FFFFFF url(images/icon_recent.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #recent-comments ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #recent-comments ul li {
    background: #FFFFFF url(images/icon_comments.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #categories-1 ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #categories-1 ul ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }

    #categories-1 ul li {
    background: #FFFFFF url(images/icon_categories.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #archives ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #archives ul li {
    background: #FFFFFF url(images/icon_archives.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #pages ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #pages ul ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #pages ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #links ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #links ul ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #links ul li {
    background: #FFFFFF url(images/icon_links.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #meta ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #meta ul li {
    background: #FFFFFF url(images/icon_meta.gif) no-repeat top left;
    padding: 0px 0px 0px 18px;
    margin: 0px 0px 0px 0px;
    }

    #text-1 ul {
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    }

    #text-1 ul li {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    }

    /************************************************
    * Footer Background *
    ************************************************/

    #footerbg {
    background: #1A4E88;
    }

    /************************************************
    * Footer *
    ************************************************/

    #footer {
    width: 960px;
    height: 30px;
    color: #FFFFFF;
    margin: 0px auto 0px;
    padding: 0px;
    }

    #footer p {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    }

    #footer a {
    color: #FFFFFF;
    text-decoration: none;
    }

    #footer a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }

    #footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }

    .footerleft {
    width: 700px;
    float: left;
    margin: 0px;
    padding: 8px 0px 8px 0px;
    }

    .footerright {
    width: 250px;
    float: right;
    margin: 0px;
    padding: 8px 0px 8px 0px;
    text-align: right;
    }
     
    stmcgill, Jan 19, 2009 IP
  2. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you still need this done? If so, I think I have a solution for you. But, you don't need to pay me. Let me know.
     
    katendarcy, Jan 19, 2009 IP
  3. katendarcy

    katendarcy Peon

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well, I guess maybe you found a solution? Just in case, (or if others need the same thing), here's my solution:

    Move #r_sidebar above #contentleft. What happens is once the first two elements are floated the #contentleft div comes up to fill up the remainder. Setting the margin on this div keeps it away from the two divs on either side of it. This is what the CSS would look like:

    /*First, add this to the body declaration:*/
    body{min-width:960px;}/*Helps keep the columns looking nice when the window's resized.*/

    #content {
    width: 98%;
    margin: 0px auto 0px;
    padding: 20px 0px 0px 0px;
    }
    /*Okay, so this isn't truly 100%. But, when you set it to 100% it's harder to add margins/padding without scrollbars showing up, especially in IE.*/

    |
    |
    |
    |

    #contentleft {
    padding: 0px 0px 20px 20px;
    margin:0px 220px 0px 160px;
    }/*You could adjust the margins if you need more room.*/

    I tested this in IE7, FF3, and Safari. If you decide to try this and have issues with it, (maybe in IE6?), you can let me know. Hope you get things worked out. : )
     
    katendarcy, Jan 19, 2009 IP