SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Css Template

  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Norway
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Template

    I'm making a css template with no tables and I got a question.
    Is it possible to define the width in both % and Px ?

    My problem is that at 800 resolution the right sidebar(#col3) disappears and I'm not sure how to solve this..

    This is the css code for the 3 columns
    #header {
    background-color: #FFFFFF;
    height: 50px;
    }

    #col1 {
    border-right: 1px solid #C6D3E7;
    border-bottom: 1px solid #C6D3E7;
    background-color: #FAFAFF;
    float: left;
    width: 25%;
    }

    #col2 {
    background-color: #FFFFFF;
    float: left;
    width: 50%;
    margin-left: 10px;
    }

    #col3 {
    border-left: 1px solid #C6D3E7;
    border-bottom: 1px solid #C6D3E7;
    background-color: #FAFAFF;
    width: 25%;
    float: right;
    }

    #footer {
    background-color: #D1DCEB;
    text-align: center;
    clear: both;
    height: 20px;

    }
    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    No you can't really mix pixels and percentages unless you want to get in to some clever negative margin stuf. You will have to specify your borders on inner elements and set your margin left in a pecentage.

    Make sure nothing adds up to more than 99.9% for ie.

    You could just float the right and left columns and let the centre column be static and clear the other columns with margins. That way the centre column doesn't need a width.

    If you have a look at my 3 column demo sticky thread you will some similar layouts.

    Paul

  3. #3
    SitePoint Enthusiast yodaddy's Avatar
    Join Date
    Aug 2004
    Location
    georgetown, tx
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aren't you looking for something like this.

    Otherwise, check out this site for more CSS info.

    Edit: Oops, Paul beat me to it.


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
  •